Jquery查找下一个和上一个div行id

Question

I want to find next div row id My Div Structure id

<div class="section row" id="row_1">
                    <div class="col-md-2"> <h6 class="fw400">Date</h6>
                        <label for="date_1" class="field prepend-icon">
                            <input type="text" id="date_1" name="date_1" class="gui-input" placeholder="Date" value="2017-02-18" readonly>
                            <label class="field-icon"><i class="fa fa-calendar"></i>
                            </label>
                        </label>
                    </div>
</div>
<div class="section row" id="row_2">
                    <div class="col-md-2"> <h6 class="fw400">Date</h6>
                        <label for="date_2" class="field prepend-icon">
                            <input type="text" id="date_2" name="date_2" class="gui-input" placeholder="Date" value="2017-02-18" readonly>
                            <label class="field-icon"><i class="fa fa-calendar"></i>
                            </label>
                        </label>
                    </div>
</div>

When I clicked on first row of Input box(date_1) then that time i want to get next row div id which is "row_2" . I tried but i dont know how to get this. Can you just tell me how to do this??

Answer 1

您可以使用next()和 prev()方法获取相邻 sibling 。稍后使用 attr() 获取 id 属性方法。

$('.row').click(function() {
  console.log('Prev : ' + ($(this).prev().attr('id') || 'Not found'));
  console.log('Next : ' + ($(this).next().attr('id') || 'Not found'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section row" id="row_1">
  <div class="col-md-2">
    <h6 class="fw400">Date</h6>
    <label for="date_1" class="field prepend-icon">
                            <input type="text" id="date_1" name="date_1" class="gui-input" placeholder="Date" value="2017-02-18" readonly>
                            <label class="field-icon"><i class="fa fa-calendar"></i>
                            </label>
    </label>
  </div>
</div>
<div class="section row" id="row_2">
  <div class="col-md-2">
    <h6 class="fw400">Date</h6>
    <label for="date_2" class="field prepend-icon">
                            <input type="text" id="date_2" name="date_2" class="gui-input" placeholder="Date" value="2017-02-18" readonly>
                            <label class="field-icon"><i class="fa fa-calendar"></i>
                            </label>
    </label>
  </div>
</div>