Question

这是我的HTML：

<fieldset>
    <legend>Ways I can be contacted</legend>
    <div class="error-message-list"></div>
    <div class="rows">
        <div class="row">
            <div>content</div>
            <div>content</div>                
        </div>
        <div class="row">
            <div>content</div>
            <div>content</div>                
        </div>
    </div>
</fieldset>
<p><a id="count" href="#">Couynt</a></p>

..这是我的Jquery：

    <script type="text/javascript">
        $(document).on({
            click: function(event) { 
                event.preventDefault();
                console.log($(this).parents().siblings('fieldset .rows div.row').length);
            }
        },'#count');
    </script>

当我点击“Count”时，零被写入控制台。我希望这是一个2，因为在row div中有2个div类rows。

如果我只是在字段集上这样做，就像这样：

console.log($(this).parents().siblings('fieldset').length);

然后它会像我期望的那样返回1。

我也试过

console.log($(this).parents().siblings('fieldset .rows .row').length);

和

console.log($(this).parents().siblings('fieldset > div.rows > div.row').length);

..和许多其他组合，但我不能说它'2'！

Answer 1

你误解了.siblings的工作方式。

.siblings('fieldset .rows div.row')

将选择与选择器匹配的所有兄弟节点，即div个带有row类的元素，它们是.rows和fieldset元素的后代。

p元素的唯一兄弟是fieldset元素，但肯定不是div。

您可以使用.find来选择里面的元素 fieldset兄弟。例如：

$(this).parent().siblings('fieldset').find('.rows div.row').length

有很多方法可以遍历/选择DOM来获取所需的信息。例如：

$(this).closest('p').prev('fieldset').find('div.row').length

Answer 2

您可以尝试这样

DEMO --> http://jsfiddle.net/EHYyk/

$(document).on({
            click: function(event) { 
               event.preventDefault();
                console.log($('fieldset .rows .row').length);
            }
        },'#count');

siblings()会为您提供相邻的元素，您可以直接遍历.row类。

Answer 3

尝试减少代码http://jsfiddle.net/2PpGN/

var c = $(".rows").children(".row").length;
alert(c)

尝试计算div时，jQuery长度返回零

3 个答案: