2

我试图在点击时找到下一个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);
}
4

4 回答 4

4

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

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

于 2013-04-22T09:14:03.957 回答
1

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

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

$('input[type="checkbox"]').click(function(){
        alert($(this).parent().parent().next('li').attr('id'));
    });
于 2013-04-22T09:17:43.467 回答
1

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

请参阅下面的代码：

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

请参阅jsfiddle 示例的链接。

于 2013-04-22T09:26:00.373 回答
1

jQuery Mobile 通过添加div'、span' 和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].idwhere[0]是数组中第一个对象的索引。

这种方法在使用时.nextAll()以及.prevAll()当您的数组产生许多对象时很有用。

演示

于 2013-04-22T10:20:20.610 回答