jQuery检查父类答案

【问题标题】：jQuery Check parent for classjQuery检查父类
【发布时间】：2011-08-05 16:04:59
【问题描述】：

我确定我只是遗漏了一些简单的东西，但我想更改所有“li”元素的 CSS 背景图像，这些元素不是具有“library_display”类的 ul 的直接子级。

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 语句，它将对所有列表项产生我想要的影响，而不仅仅是我想要的那些。

编辑：感谢代码块。我在让它正常工作时遇到了一些问题。

【问题讨论】：

你不能把libarary_display里面的第一层li都挑出来吗？

标签： jquery dom styles

【解决方案1】：

这只会影响在ul.library_display 内至少嵌套两层的<li> 元素

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

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

【讨论】：

没问题。如果你最喜欢这个答案，你可以点击它左边的复选标记来“接受”它。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

此陈述对某些人来说是正确的，而对其他人来说是错误的，这并不使其成为有效的if 陈述。您可能想要遍历所有 lis，或者制作一个巨大的选择器：

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

【讨论】：