Select next HTML specific element - jquery

Question

I have this code:

<section class="col col-md-4">
<label class="checkbox">                                                       
<input type="checkbox" name="subscription" class="chk_Especialization" value="1">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-1" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-1" placeholder="dtEnd">
    </label>
</section>



<section class="col col-md-4">
<label class="checkbox">                                                      
<input type="checkbox" name="subscription" class="chk_Especialization" value="2">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-2" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-2" placeholder="dtEnd">
    </label>
</section>


<section class="col col-md-4">
<label class="checkbox">                                                        
<input type="checkbox" name="subscription" class="chk_Especialization" value="3">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-3" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-3" placeholder="dtEnd">
    </label>
</section>

I want alert id of the next input element if I click over a class start input element, and alert id of the previous input element if I click over a finish class element.

I have tried use this post JQuery: Closest div that has an ID and this one jquery, find next element by class but I think there is some error in my code.

this is the javascript code:

$(document).on("click", ".dateRange", function(){
    if($(this).hasClass( "start" )){
        //Select next input element with finish class
        alert($(this).closest('input').next().attr("id"));
    }
    if($(this).hasClass( "finish" )){
        //Select previous input element with start class
        alert($(this).closest('input').prev().attr("id"));
    } 
});

I have create a jsfiddle to :http://jsfiddle.net/towx8xro/1/

Any idea what is going wrong?

sorry it is becouse I copy from my php code.. I will solve this — IgorAlves, Nov 17 '14 at 15:29
`$(this).closest('input')`??? Read the DOC: http://api.jquery.com/closest/ — A. Wolff, Nov 17 '14 at 15:33

score 3 · Answer 1 · answered Nov 17 '14 at 15:33

The problem seems to be you are clicking an input then finding the closest input, which doesn't work. You need to go up the chain to the section, then next or previous and back down to it's input:

$(document).on("click", ".dateRange", function(){
    if($(this).hasClass( "start" )){
        //Select next input element with finish class
        alert($(this).closest('section').next().find("input").attr('id'));
    }
    if($(this).hasClass( "finish" )){
        //Select previous input element with start class
        alert($(this).closest('section').prev().find("input").attr('id'));
    } 
});

score 2 · Accepted Answer · answered Nov 17 '14 at 15:34

Your selector should find the closest section element, and then either go forward or backwards to find the related start/end input using prev and next respectively. Try this:

$(document).on("click", ".dateRange", function () {
    var $el = $(this);
    if ($el.hasClass("start")) {
        alert($el.closest('section').next().find('input').prop("id"));
    }
    if ($el.hasClass("finish")) {     
        alert($el.closest('section').prev().find('input').prop("id"));
    }
});

Updated fiddle

PeterKA · Answer 3 · 2014-11-17T15:49:28.653

Use .closest() to determine the .col parent of the clicked input, then depending on the class the clicked input has start|finish determine the direction -- next|prevv. Use direction to select the target .col and use .find to select the input element in the target .col and then get it's id.

$('.dateRange').on('click',function() {
    var direction = $(this).hasClass( 'start' ) ? 'next' : 'prev';
    alert( $(this).closest('.col')[direction]('.col').find('.dateRange')[0].id );
});

$('.dateRange').on('click',function() {
    var direction = $(this).hasClass( 'start' ) ? 'next' : 'prev';
    alert( $(this).closest('.col')[direction]('.col').find('.dateRange')[0].id );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <section class="col col-md-4">
    <label class="checkbox">                                                       
    <input type="checkbox" name="subscription" class="chk_Especialization" value="1">
    </label>
    </section>  

    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangestart start dateRange" id="start-1" placeholder="dtStart">
        </label>
    </section>
    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangefinish finish dateRange" id="finish-1" placeholder="dtEnd">
        </label>
    </section>



    <section class="col col-md-4">
    <label class="checkbox">                                                      
    <input type="checkbox" name="subscription" class="chk_Especialization" value="2">
    </label>
    </section>  

    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangestart start dateRange" id="start-2" placeholder="dtStart">
        </label>
    </section>
    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangefinish finish dateRange" id="finish-2" placeholder="dtEnd">
        </label>
    </section>


    <section class="col col-md-4">
    <label class="checkbox">                                                        
    <input type="checkbox" name="subscription" class="chk_Especialization" value="3">
    </label>
    </section>  

    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangestart start dateRange" id="start-3" placeholder="dtStart">
        </label>
    </section>
    <section class="col col-md-4">
        <label class="input">
            <input type="text" class="dateRangefinish finish dateRange" id="finish-3" placeholder="dtEnd">
        </label>
    </section>

Select next HTML specific element - jquery

3 Answers3