Question

我确信我只是遗漏了一些简单的东西，但我想改变所有'li'元素的CSS背景图像，这些元素不是ul的直接子元素，而是'library_display'类。

HTML ：

<ul class="library_display treeview">
    <li>General Competencies
        <ul>
            <li>Achievement Orientation
                <ul>
                    <li class="modal" id="itm_59_modal">
                        <a href="#">Argle Bargle</a>
                   </li>
                </ul>
            </li>
            <li>
                <a href="myUrl" class="modal" id="itm_14_modal">Adaptability</a>
            </li>
        </ul>
    </li>
    <li>Leadership Competencies
        <ul>
            <li>
                <a href="myUrl" class="modal" id="itm_22_modal">Critical Judgment</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="myUrl" class="modal" id="itm_2_modal">Change Management</a>
    </li>
</ul>

JS ：这是正在执行的代码（在document.ready语句中）：

if (!$('.treeview li').parents('ul:first').hasClass("library_display")){
    $('.treeview li').css({'background':'url(branch.png) 0px 0px no-repeat'});
}

现在没有任何影响。如果我删除if语句，它将对所有列表项产生影响，而不仅仅是我想要的那些。

编辑：感谢代码块。我有一些问题让它正常工作。

Answer 1

这只会影响嵌套在<li>

中至少两个级别的ul.library_display个元素

$(".library_display li li").css({
   'background':'url(branch.png) 0px 0px no-repeat'
});

jQuery文档：http://api.jquery.com/descendant-selector/

Answer 2

试试这个：

$('ul.library_display').children('li').find('li').css(...);

Answer 3

if (!$('.treeview li').parents('ul:first').hasClass("library_display")){
    $('.treeview li').css({'background':'url(branch.png) 0px 0px no-repeat'});
}

对于某些人来说这个陈述是正确的，而对其他人来说则是假的，这使得它不是有效的if陈述。你想要迭代所有的li，或者做一个巨大的选择器：

$('.treeview li').each(function()
{
  if ($(this).parents('ul:first').hasClass('library_display')
  {
    $(this).css('background', 'url(branch.png) 0px 0px no-repeat');
  }
});

jQuery检查父级的类

3 个答案: