3

我想通过 jQuery 搜索我的 HTML 代码以获取具有最多 HTML 标签的 div。在下面的示例中，jQuery 应该返回 #div2，因为它在其中包含 4 个 div。

<div id="div1">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div id="div2">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div id="div3">
    <div>content</div>
    <div>content</div>
</div>

对不起，如果这个例子有点模棱两可——我认为不需要一个非常具体的代码块。提前致谢。

4

3 回答 3

12

你可以通过iterating through each divand来做到这一点keeping the div with maximum childs，

现场演示

maxChild = 0;
maxChildDiv = null;

$('div').each(function(){
    currentChildCount = $(this).children().length 
    if(currentChildCount > maxChild ) 
    {
        maxChild = currentChildCount ;
        maxChildDiv = $(this);
    } 
});
于 2012-10-24T12:12:36.860 回答
2 
var maxDiv = $('div').get().reduce(function(child1, child2) {
  return $(child1).children().length > $(child2).children().length ? child1 : child2;
});
alert(maxDiv.id);

该reduce方法是ECMAScript 5 的一部分，因此受到现代浏览器的支持（更有效）。如果原型不存在，您可以添加reduce到原型中，如该链接中所述。Array

演示在这里。

于 2012-10-24T12:35:39.567 回答
2

这对我有用：-

<html>
    <head>
        <title>test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>

$(document).ready(function() {
    max = 0;
    divid = null;

    $('div').each(function() {
        if($(this).children().length > max) {
            max = $(this).children().length;
            divid = $(this).attr('id');
        } 
    });

    alert (divid);
});

        </script>
    </head>
    <body>
        <div id="div1">
            <div>content</div>
            <div>content</div>
            <div>content</div>
        </div>
        <div id="div2">
            <div>content</div>
            <div>content</div>
            <div>content</div>
            <div>content</div>
        </div>
        <div id="div3">
            <div>content</div>
            <div>content</div>
        </div>
    </body>
</html>
于 2012-10-24T12:23:40.527 回答