5

クラスsiblingごとにカウントしたい、

html、

<div class="item-sibling">1</div>
<div class="item-holder"><div class="item-sibling">2</div></div>
<div class="item-holder"><div class="item-sibling">3</div></div>
<div class="item-holder"><div class="item-sibling">4</div></div>
<div class="item-holder"><div class="item-sibling">5</div></div>​

jquery、

var len = $('.item-sibling').siblings().css({background:'red'}).length;
alert(len);​​​​ // return 4

含まない<div class="item-sibling">1</div>

どうすれば含めることができますか？

jsfiddleリンク

そして、htmlを次のように変更すると、

<div class="item-sibling">0</div>
<div class="item-sibling">1</div>
<div class="item-holder"><div class="item-sibling">2</div></div>
<div class="item-holder"><div class="item-sibling">3</div></div>
<div class="item-holder"><div class="item-sibling">4</div></div>
<div class="item-holder"><div class="item-sibling">5</div></div>

6今回は頂きます。変！

編集、

<div class="group-a">
    <div class="item-sibling">1</div>
    <div class="item-holder"><div class="item-sibling">2</div></div>
    <div class="item-holder"><div class="item-sibling">3</div></div>
    <div class="item-holder"><div class="item-sibling">4</div></div>
    <div class="item-holder"><div class="item-sibling">5</div></div>​
</div>


<div class="group-b">
    <div class="item-sibling">1</div>
    <div class="item-holder"><div class="item-sibling">2</div></div>
    <div class="item-holder"><div class="item-sibling">3</div></div>
</div>

同じクラスの一連のグループがあり、対象となるグループの兄弟を、たとえば最初のグループのように動的にカウントしたいと考えています。

4

5 に答える 5

8

できるよ

var len = $('.item-sibling').siblings().andSelf().css({background:'red'}).length;

または...

var len = $('.item-sibling').parent().children().css({background:'red'}).length;

編集：あなたの更新を読んだ後、私は次のことを提案します：

1) 各グループに一般的な「グループ」クラスを追加します。例えば、

<div class="group group-a">
    ...
</div>

2) 次に、そのクラスを利用してすべての「兄弟」を見つけます。

var len = $('.item-sibling:first').closest('.group')
    .find('.item-sibling').css({background:'red'}).length;
于 2012-05-11T15:06:19.290 に答える
2

グループへの参照がある場合は、次のように簡単に実行できます。

var items = $group.find('.item-sibling').length;

.item-siblingan要素への参照がある場合は、次のようにします。

var items = $item.closest('.group').find('.item-sibling').length;

これは、各グループに共通のクラスがあることを前提としています。

各グループの要素数のリストを取得する場合は、各グループを反復処理する必要があります。

var num_items = $('.group').map(function() {
    return $(this).find('.item-sibling').length;
}).get();
于 2012-05-11T15:24:25.663 に答える
2

兄弟は他人だから。andSelf()取得したセットに対象の要素を含むjQuery を試してください。

var len = $('.item-sibling')
    .siblings()
    .andSelf()
    .css({background:'red'})
    .length;

2 番目の HTML には、 と の 2 つ.item-siblingが0あり1ます。jQuery は0の兄弟 (.item-holderを含む1) と1の兄弟 ( を.item-holder含む) を取得0し、全部で 6 つになります。

于 2012-05-11T15:07:57.713 に答える
1

jqueryのドキュメントによると.

「元の要素は兄弟には含まれません。これは、DOM ツリーの特定のレベルにあるすべての要素を見つけたい場合に覚えておくことが重要です。」

参照: http://api.jquery.com/siblings/

于 2012-05-11T15:09:15.957 に答える
0

class="item-sibling" を使用してすべての div をカウントしたい場合は、

$('.item-sibling').length;

これは5つのdivすべてをカウントしますか?

于 2012-05-11T15:10:08.773 に答える