选择下一个HTML特定元素- jquery

Question

我有这样的代码：

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

如果我单击一个类开始输入元素，我想要下一个输入元素的警报id，如果我单击一个finish class元素，则需要警告id上一个输入元素。

我尝试过使用这个帖子JQuery: Closest div that has an ID和这个jquery, find next element by class，但是我认为我的代码中有一些错误。

这是javascript代码：

$(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"));
    } 
});   

我创建了一个jsfiddle :http://jsfiddle.net/towx8xro/1/

知道出什么问题了吗？

Answer 1

您的选择器应该找到最接近的section元素，然后使用prev和next分别向前或向后查找相关的开始/结束输入。试试这个：

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

Answer 2

问题似乎是，您正在单击一个input，然后找到最接近的input，这是不起作用的。您需要向上链接到section，然后下一个或前一个，然后返回到它的输入：

$(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'));
    } 
});

Answer 3

使用.closest()确定单击input的.col父级，然后根据单击输入的start|finish确定direction -- next|prevv的类。使用direction选择目标.col，使用.find在目标.col中选择input元素，然后获取它的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>

​