0

我想知道如何影响多个 div 中的某个跨度索引。

小提琴

我在其他 3 个 Div 中有 3 个可点击的 Div 和 3 个跨度集，就像这样......

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（spanset 类）中对它们进行索引

我确信这与 JQuery 中的这个选择器有关

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

最终，当我单击 div 1 时，我希望每个 spanset 的第一个 span 受到影响，而不仅仅是页面上的第一个也是唯一一个 span。

有什么想法吗？

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

您没有正确关闭 spanset 的 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 回答
0

试试这个jsbin

$('.spanset').each( function(){
    $(this).children('span').eq(x).css(...)
});
于 2012-11-05T08:34:35.817 回答
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 回答