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

xfyts7mz  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(186)

我有这个代码:

<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/
你知道出了什么问题吗?

gajydyqb

gajydyqb1#

问题似乎是你点击一个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'));
    } 
});
1qczuiv0

1qczuiv02#

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

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

e3bfsja2

e3bfsja23#

使用.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>

相关问题