选择下一个 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，如果我点击一个完成类元素，我想要前一个输入元素的警报 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

问题似乎是您单击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 2

您的选择器应该找到最接近的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 3

使用.closest() 来确定点击的input 的.col 父级，然后根据点击的输入具有start|finish 的类确定direction -- next|prevv。使用direction选择目标.col，使用.find选择目标input中的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>