-1

このhtmlシナリオがあるとします：

<div class="parent">
    <a href="javascript:void(0);" class="child">Link</a>
    <a href="javascript:void(0);" class="child">Link</a>
    <a href="javascript:void(0);" class="child">Link</a>
</div>          

<div class="parent">
    <a href="javascript:void(0);" class="child">Link</a>
</div>

さて、childリンクで、そのグループのサイズを数えたいと思います。しかし、最初のグループのリンクをクリックすると、それは 4 ではなく 3 でなければなりません。

そのため、グループごとにハンドラーをアタッチする必要があります。試した：

$('.parent .child').size();

しかし、カウントは常に 4 です。どうすればよいですか?

また、親のない単一のリンクの場合は次のようになります。

<a href="javascript:void(0);" class="child">Link</a>

同様に機能する必要があります（サイズは1で、「親」グループ内にない場合も同様です）

これを行う最善の方法は？

4

2 に答える 2

3

あまりエレガントではありませんが、それで仕事は終わります。

$('a.child').each(function() {
    $(this).parent().children('a.child').first().addClass('first');
});
$('a.child.first').parent().each(function() {
    alert($(this).children('a.child').size());
});

http://jsfiddle.net/XFbWn/4/

注意：3-1-1ではなく1-3-1を取得します。これは、親がない場合は、DOMツリーで他のa.child人よりも高いため、最初にセレクターによって取得されるためだと思います。a.child

編集：上記は書かれた答えの解決策です。以下は、作者がコメントで説明しているユースケースの更新バージョンです。

http://jsfiddle.net/XFbWn/8/

$('a.child').each(function() {
    $(this).parent().children('a.child').first().addClass('first');
});
var i = 0;
$('a.child.first').removeClass('first').each(function() {
    $(this).parent().children('a.child').addClass('colorBoxGroup-' + i);
    $('.colorBoxGroup-' + i).colorbox({ rel: 'colorBoxGroup-' + i, transition: "fade", maxWidth: "900px", maxHeight: "600px" });
    i++;
});

</ p>

于 2012-10-12T09:29:36.190 に答える
0

これを試して

<div class="parent" id='group1'>
   <a href="javascript:void(0);" class="child">Link</a>
   <a href="javascript:void(0);" class="child">Link</a>
   <a href="javascript:void(0);" class="child">Link</a>
</div>          

<div class="parent">
   <a href="javascript:void(0);" class="child">Link</a>
</div>
$('#group1 .child').size();
于 2012-10-12T09:27:22.697 に答える