CODEWITHSUNDEEP
jquery
Ashish Aware
Ashish Aware

Reputation: 169

Jquery Find Next and Prev div Row id

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

Upvotes: 2

Views: 95

Answers (4)

NID
NID

Reputation: 3294

use parents() and next()

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

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

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115232

You can use next() and prev() method to get adjacent siblings. Later get the id attribute using attr() method.

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

Upvotes: 1

4b0
4b0

Reputation: 22323

Use parents and next.

Working Fiddle

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

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

Working Fiddle

Upvotes: 0

Related Questions