JQuery Find Next und Prev div Row-ID

Question

ich als nächstes div Reihe ID Mein Div Struktur 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> 

Wenn ich auf dem ersten Zeile des Eingabefeldes (Datum_1) geklickt finden will, dann zu dieser Zeit möchte ich die nächste Zeile div id bekommen, die "row_2" ist. Ich habe es versucht, aber ich weiß nicht, wie ich das bekommen soll. Kannst du mir einfach sagen, wie ich das mache?

Answer 1

Verwendung parents() und next()

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

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

Answer 2

können Sie next() und prev() Methode verwenden, um benachbarte Geschwister zu bekommen. Später erhalten Sie das id Attribut mit attr() Methode.

$('.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 3

Try this:

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

Working Fiddle

Answer 4

Verwenden Eltern und nächsten.

Working Fiddle

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