如何动态查找下一个 li 标签答案

【问题标题】：How to find next li tag dynamically如何动态查找下一个 li 标签
【发布时间】：2013-04-15 03:05:10
【问题描述】：

我正在尝试在checkbox 点击上找到下一个li 标签。我尝试了一些方法（壁橱，父母）但得到未定义的错误。我已经创建了函数并将复选框 id 传递给它。这是我的代码

HTML

<li data-role="fieldcontain" id="liDoorConcerns" style="display: none;">
    <fieldset data-role="controlgroup" data-role="fieldcontain">
        <legend></legend>

        <input type="checkbox" name="DoorMissing" id="DoorMissing" />
        <label style="font-weight: bold; font-size: 14px" for="DoorMissing">Missing</label>

        <input type="checkbox" name="DoorDamaged" id="DoorDamaged" />
        <label style="font-weight: bold; font-size: 14px" for="DoorDamaged">Damaged</label>

        <input type="checkbox" name="DoorBoardedUp" id="DoorBoardedUp" />
        <label style="font-weight: bold; font-size: 14px" for="DoorBoardedUp">Boarded up</label>

        <input type="checkbox" name="DoorPaint" id="DoorPaint" />
        <label style="font-weight: bold; font-size: 14px" for="DoorPaint">Paint</label>

        <input type="checkbox" name="DoorDryRot" id="DoorDryRot" />
        <label style="font-weight: bold; font-size: 14px" for="DoorDryRot">Dry Rot</label>

        <input type="checkbox" name="DoorOther" id="DoorOther" />
        <label style="font-weight: bold; font-size: 14px" for="DoorOther">Other</label>
    </fieldset>
</li>

<li data-role="fieldcontain" id="liDoorConcernsComments" style="display:none;">
    <fieldset data-role="controlgroup" data-role="fieldcontain">
        <legend></legend>
        <textarea cols="20" id="DoorConcernsComments"    name="DoorConcernsComments" rows="2"></textarea>
    </fieldset>
</li>

JS代码：

function test(ida) {
    debugger;
    var element = $('#' + ida);
    var get = element.find('li');
    var li_id = get.first().id;
    alert("id" + li_id);
}

【问题讨论】：

api.jquery.com/next
你从哪里调用这个test()，你能创建JS Fiddle吗？
正在从复选框点击事件中调用测试
你为什么要在li 中使用find 和li？
我需要在单击复选框时显示/隐藏，我在每个页面上都有这个功能，所以想让它动态

标签： jquery search jquery-mobile dynamic

【解决方案1】：

据我了解，您的做法是错误的。试试这个：

$('input[type="checkbox"]').on('click', function() {
    var li = $(this).closest('li').next('li');

    alert(li.prop('id'));
});

您需要做的就是找到最近的<li>，然后找到<li>。不需要从字符串构造选择器。

您的未定义错误可能源于此行：

alert("id" + li_id);

元素li_id 是一个jQuery 对象，它没有.id 属性。为此，请使用li.prop('id') 或li[0].id。

【讨论】：

这是demo。使用$(this).closest('li').next('li')[0].id; 更容易
感谢 Omar，它对我的点击和编辑模式都有效
@Bojangles id 存储在data- 的什么位置？ attr 似乎可以在 jsfiddle.net/j37wg/1 btw +1 中找到适用于移动设备的解决方案
@user2153497 哦，是的 - 我没有看到它只是 id 而不是 data-id。已更正

【解决方案2】：

在 jsFiddle 上查看示例 http://jsfiddle.net/rhP3E/

我创建了一个函数，它将在复选框单击时找到下一个 li 的 id

$('input[type="checkbox"]').click(function(){
        alert($(this).parent().parent().next('li').attr('id'));
    });

【讨论】：

查看此链接。它也适用于 jQuery mobile jsfiddle.net/rhP3E/2
是的，我知道，它不同于您发布的答案和第一个 js 演示 :) 使用 .parent() 并不总是适用于 JQM，因为它动态地增强了标记并添加了额外的 div。使用.closest() 更安全。

【解决方案3】：

如果我没记错的话，您正在寻找一个代码，它会在您单击复选框后告诉您下一个 <li>。

代码如下：

$('input[type="checkbox"]').click(function () {
 var parentLI = $(this).closest('li').next().attr('id');
 console.clear();
 console.log(parentLI);
});

有关 jsfiddle 示例，请参阅 link。

【讨论】：

【解决方案4】：

jQuery Mobile 通过添加div's、span's 和classes 来动态增强标记。这就是说，使用.parent() 在DOM 中查找元素并不总是 达到理想的结果。因此，改用.closest() 是有保证的，也更安全。

这是我一直用来查找元素并获取其id 的一种方法。

$('[type=checkbox]').on('click', function() {
 var first =  $(this).closest('li').next('li')[0].id;
 alert(first);
});

$(this).closest('li').next('li') 将产生一个[object]，要在没有额外代码的情况下获取id，请使用[0].id，其中[0] 是数组中第一个对象的索引。

当您的数组产生许多对象时，此方法在使用 .nextAll() 和 .prevAll() 时很有用。

Demo

【讨论】：