jQuery的查找下一個和上一個DIV行ID

我要找到下一個DIV行ID 我的事業部結構IDjQuery的查找下一個和上一個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」。我試過，但我不知道如何得到這個。你能告訴我如何做到這一點？

來源

2017-02-20 Ashish Aware

使用parents()和next()

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

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

來源

2017-02-20 04:58:28 NID

您可以使用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>

來源

2017-02-20 04:58:31

試試這個：

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

Working Fiddle

來源

2017-02-20 04:59:33

使用的父母和未來。

Working Fiddle

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

來源

2017-02-20 04:59:41

jQuery的查找下一個和上一個DIV行ID

回答

相關問題