jQuery查找下一步和Prev Div行ID

Question

我想找到下一个Div Row ID 我的DIV结构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>

当我单击输入框的第一行（date_1）时，我想获得下一个行div ID，即" row_2"。我尝试过，但我不知道该如何得到。你能告诉我怎么做吗？

Answer 1

您可以使用next()和prev()方法获得相邻的兄弟姐妹。稍后使用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>

Answer 2

使用父母（）和next（）

$("#date_1").click(function(){
var id = $(this).parents().parents().next("div").attr("id");;
console.log(id);
});

Answer 3

尝试以下：

$(document).ready(function(){
    $('.section').click(function(){
    alert($(this).next('div').attr('id'));
  })
});

工作小提琴

Answer 4

使用父母和下一个。

工作小提琴

$( "#date_1" ).focus(function() {
    var id = $(this).parents().parents().next('div').prop('id');
    alert(id);
});