获取非子元素

Question

我有一个超大的菜单工作，现在我想得到所有的h3标签，这是没有孩子的ul后它。

这是具有子项的li的html

<li id="megamenu-mlid-370" class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first  first">
    <h3 class="megamenu-slot-title"><a href="/kcompute/" class="active">IT Management Solutions</a></h3>
    <ul class="megamenu-items ">
        <li id="megamenu-mlid-373" class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first  first"><a href="/kcompute/" class="active">Web Portal</a></li>
        <li id="megamenu-mlid-374" class="megamenu-item megamenu-item-1 even half-1 leaf-1 "><a href="/kcompute/" class="active">Document Management</a></li>
        <li id="megamenu-mlid-381" class="megamenu-item megamenu-item-2 odd half-1 leaf-2 "><a href="/kcompute/" class="active">Content Management </a></li>
        <li id="megamenu-mlid-382" class="megamenu-item megamenu-item-3 even half-1 leaf-3 "><a href="/kcompute/" class="active">Knowledge Management</a></li>
        <li id="megamenu-mlid-383" class="megamenu-item megamenu-item-4 odd half-1 leaf-4 "><a href="/kcompute/" class="active">Trading and Brokerage</a></li>
        <li id="megamenu-mlid-384" class="megamenu-item megamenu-item-5 even half-2 leaf-5 "><a href="/kcompute/" class="active">Enterprise Resource Planning</a></li>
        <li id="megamenu-mlid-385" class="megamenu-item megamenu-item-6 odd half-2 leaf-6 "><a href="/kcompute/" class="active">Simulator Development </a></li>
        <li id="megamenu-mlid-386" class="megamenu-item megamenu-item-7 even half-2 leaf-7 "><a href="/kcompute/" class="active">Data Management</a></li>
        <li id="megamenu-mlid-387" class="megamenu-item megamenu-item-8 odd half-2 leaf-8 last  last"><a href="/kcompute/" class="active">Telecommunication</a></li>
    </ul>
</li>

这是没有子ul的li的html。

<li id="megamenu-mlid-419" class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first  first">
    <h3 class="megamenu-slot-title"><a href="/kcompute/" class="active">Jobs</a></h3>
</li>

在javascript中，我有一个返回所有ul的megaBins函数

我想要一个jQuery函数来添加一个没有子类的类no-items。

问候

Answer 1

试试这个：

$("ul.megamenu > li").each(function() {
    if ($(this).find("ul").length == 0) {
        $(this).addClass("no-items");
    }
});

你很可能需要改变ul.megamenu选择器来匹配你的megadropdown的ul --我只是猜测了一下。

Answer 2

尝试将:has选择器与not结合使用。http://api.jquery.com/has-selector/

$("#megamenu > li").not("#megamenu > li:has(> ul)").addClass("no-items");

这是一个jsFiddle http://jsfiddle.net/NSr7S/7/

Answer 3

您也可以编写自定义的jQuery函数。

jQuery.fn.checkChildren = function () {
    var validChilds = 'li,h3'
    $(this).each (function () {
        if ($(this).find(validChilds).length == 0) {
            $(this).addClass('no-items');
        }
    });
}

$(function () {
    $('div#liWrapper').children('li').checkChildren(); 
});

演示：http://jsfiddle.net/T6K6q/