Question

我想找到下一个div行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

使用parents()和next()

$("#date_1").click(function(){

var id = $(this).parents().parents().next("div").attr("id");;
console.log(id);
});

Answer 2

您可以使用next()和prev()方法获取相邻的兄弟姐妹。稍后使用attr()方法获取id属性。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

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

Working Fiddle

Answer 4

使用父母和下一个。

Working Fiddle

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

Jquery Find Next和Prev div row id

4 个答案: