jQuery长度在尝试计数div时返回零

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>

当我点击"计数"时，一个零会被写入控制台。我希望这是一个2，因为在rows分区中有2个类为row的分区。

如果我只是在球场上做，比如说：

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')

将选择与选择器匹配的所有同级元素，即具有类row的div元素以及.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

你可以试试这个

演示-->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)