Question

我想在li点击上找到下一个checkbox代码。我尝试了一些方法（壁橱，父母），但得到未定义的错误。我创建了函数，并将复选框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);
}

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

Answer 2

检查jsFiddle上的示例 http://jsfiddle.net/rhP3E/

我创建了一个函数，它会在复选框点击

上找到下一个li的id

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

Answer 3

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

请参阅下面的代码：

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

请参阅link了解jsfiddle示例。

Answer 4

jQuery Mobile通过添加div，span和class来动态增强标记。有人说，使用.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

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

HTML

JS代码：

4 个答案: