0

複数のdiv内の特定のスパンインデックスにどのように影響するのか疑問に思っています。

フィドル

私は3つのクリック可能なDivと3つのスパンセットを他の3つのDiv内に持っています...

HTML

<div class='clickable'>DIV</div>
<div class='clickable'>DIV</div>
<div class='clickable'>DIV</div>

<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>

<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>


<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>

これがクリック時の適切なスパンに影響を与える私のJQueryです（エラーはここにあります）

JQuery

$('.clickable').on('click', function() {

    $('span').css({'color': 'black' });

    x = $(this).index();

    $('.spanset span').eq(x).css({
        'color': 'red'
    });

});

コンテナdiv（スパンセットクラス）のそれぞれからスパンをインデックス付けするのではなく、スパン全体をインデックス付けしているようです

これはJQueryのこのセレクターと関係があると確信しています

 $('.spanset span').eq(x)

最終的に、div 1をクリックすると、ページの最初の唯一のスパンだけでなく、各スパンセットの最初のスパンが影響を受けるようにします。

何かご意見は？

4

7 に答える 7

3

ここでの他の回答は、ループを使用することを提案しています。ループを使用する必要はありません:eq。疑似セレクターを使用するだけです。

例えば。

$('span:eq(' + x + ')', '.spanset').css({
    'color': 'red'
});

これがデモです

于 2012-11-05T08:43:57.257 に答える
1

更新版

// using the loop here, instead of internally by jQuery, gives use access to the
// `.clickable`s index without recalculating it on every click
$('.clickable').each(function (n) {
  // attach the handler
  $(this).on('click', function () {
    // get all spans
    $('.spanset span')

    // reset
    .css({color: 'black'})

    // filter the elements using `n` from the outer scope, profiting from
    // native implementations for `nth-child`
    .filter(':nth-child(' + (2*n + 1) + ')') // the used formula depends on the
                                             // actual markup. This one accounts
                                             // for the <br /> tags
    // apply new styles
    .css({color: 'red'});
  });
});

http://jsfiddle.net/CcM2K/

古いバージョン

$('.clickable').on('click', function () {
    // get the index of the clicked element within it's parent
    var clickedIdx = $(this).index();

    // reset all span elements (could also use removeClass(), hide(), ...)
    $('.spanset span').css({
        color: 'black'

    // get only those spans that have the same index within their parents
    }).filter(function (idx) {
      // for this we use the spans index in the complete list, get the modulo of
      // that index and the index of the clicked element
      return idx % 3 === clickedIdx; // the literal 3 should be the number
                                     // of total clickable divs. If that number
                                     // is subject to change, a count here or in
                                     // the parent scope would be appropriate.
    // apply new css to only those filtered spans
    }).css({
        color: 'red'
    });
});​

http://jsfiddle.net/ntTJA/1/

于 2012-11-05T08:40:28.647 に答える
0

eachJQueryの関数を使用してそれを行うことができます：

$('.clickable').on('click', function() {

    $('span').css({'color': 'black' });

    x = $(this).index();

    $('.spanset').each(function(spanset){
        $(this).children().eq(x).css({
            'color': 'red'
        });            
    });
});​
于 2012-11-05T08:34:27.953 に答える
0

このjsbinを試してください

$('.spanset').each( function(){
    $(this).children('span').eq(x).css(...)
});
于 2012-11-05T08:34:35.817 に答える
0

スパンセットのdivタグを適切に閉じていません。それらをすべてから<div>に変更します</div>。

これは別の方法です：

$('span').css({'color': 'black' });

x = $(this).index();
$('.spanset').each(function(){
    $('span',this).eq(x).css({
       'color': 'red'
    });
});
于 2012-11-05T08:41:45.463 に答える
0

:nth-child()セレクターを使用できます

$('.clickable').on('click', function() {  
     /* $(this).index() won't work due to clickable has more siblings than just clickable*/  
      var idx=$('.clickable').index(this)
    $('.spanset span:nth-child('+(idx+1)+')').css({
        'color': 'red'
    });

});

APIリファレンス http://api.jquery.com/nth-child-selector/

于 2012-11-05T08:42:42.827 に答える
0

このhttp://jsfiddle.net/tyjaD/33/をチェックしてください

$('.clickable').on('click', function() {

$('span').css({'color': 'black' });

x = 2 * $(this).index() + 1;

$('.spanset span:nth-child(' + x + ')').css({
    'color': 'red'
    });

});​
于 2012-11-05T08:42:51.763 に答える