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()确定点击的.col的{{1}}个父级，然后根据所选类别input确定start|finish的类别 - direction。使用next|prevv选择目标direction并使用.col选择目标.find中的input元素，然后获取其ID。

.col

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

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

3 个答案: