Question

我有多个<div class='ms-drop'>，其中包含许多<li>项。我正在尝试覆盖每个<li>项目。

我尝试了几种方法，这就是我得到的：

 $(function() {
       var counter = 0;
        $('.ms-drop').each(function() { // loop each div
            counter++;
            $(this).attr('id','ms-drop-' + counter); // here I am giving each div a it's own id > $(this) did not work!
            var id = $(this).attr('id');

            $('#ms-drop-' + id + ' il').each(function() {
                console.log("li"); // it does not reach here !
            });                        
        });
 });

HTML

<div class="ms-drop bottom" style="display: block;">
     <ul style="max-height: 250px;">           
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="60"><span>ABC</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="38"><span>DEF</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="45"><span>GHI</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="2863"><span>JKL</span></label></li>
    </ul>
</div>

ABC DEF GHI JKL

Answer 1

您尝试定位<il>元素而不是<li>元素，因为可能存在拼写错误。只需将il更改为li，它就应该定位适当的子<li>元素，如下所示：

$('#ms-drop-' + id + ' li').each(function(){
      console.log("li");
});

这里的另一个问题是，当您实际设置ID属性，然后在选择器中将相同的值附加到“＃ms-drop-”时：

// This sets your ID to 'ms-drop-{counter}'
$(this).attr('id','ms-drop-' + counter);
// Now when you reference this, you'll get '#ms-drop-ms-drop-{counter} li'
$('#ms-drop-' + id + ' li').each(function(){ ... });

一种更简单的方法，因为你已经在上下文中使用了元素，只需使用jQuery's context selector来定位当前“drop”下面的所有li元素：

$(this).attr('id','ms-drop-' + counter);
// Now when you reference this, you'll get '#ms-drop-ms-drop-{counter} li'
$('li',this).each(function(){ ... });

你也可以考虑使用find()函数，它的工作方式类似：

$(this).find('li').each(function(){ ... });

示例

$(function() { var counter = 0; $('.ms-drop').each(function() { // Increment your counter counter++; // Set your ID $(this).attr('id','ms-drop-' + counter); $('li',this).each(function() { // Output the text (for example purposes) console.log($(this).text().trim()); }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ms-drop bottom" style="display: block;"> <ul style="max-height: 250px;"> <li class=" " style="false"> <label class=""> <input type="checkbox" data-name="selectItem" value="60"><span>ABC</span> </label> </li> <li class=" " style="false"> <label class=""> <input type="checkbox" data-name="selectItem" value="38"><span>DEF</span> </label> </li> <li class=" " style="false"> <label class=""> <input type="checkbox" data-name="selectItem" value="45"><span>GHI</span> </label> </li> <li class=" " style="false"> <label class=""> <input type="checkbox" data-name="selectItem" value="2863"><span>JKL</span> </label> </li> </ul> </div>

Answer 2

我删除了console.log部分，因为当您还没有完成创建时，我不明白为什么要查找它们。

$(function() {
       var counter = 0;
        $('.ms-drop ul li').each(function() { // loop each div
            counter++;
            $(this).attr('id','ms-drop-' + counter); // here I am giving each div a it's own id > $(this) did not work!
        });
});

Answer 3

你可以简单地使用'find（）'来获取每个div中的li元素数组。

$(function() { var counter = 0; $('.ms-drop').each(function() { // loop each div $(this).find('li').each(function(liElement){ console.log(liElement); }); }); });

Answer 4

我相信这可能是您代码的有效版本：

$(function() {
    var counter = 0;
    $('.ms-drop').each(function() {
        $(this).attr('id','ms-drop-'+(counter++))
               .find('li')
               .each(function() {
                   console.log("li");
               });
    });
});

Jquery，无法获得Div中的每个li

4 个答案: