Question

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

我在其他3个Div中有3个Clickable Divs和3个Span Set，如此......

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的第一个跨度受到影响，而不仅仅是页面上的第一个和唯一的跨度。

有什么想法吗？

Answer 1

此处的其他答案建议使用循环，您不需要，只需使用:eq伪选择器。

例如

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

Here's a demo

Answer 2

更新版本

// 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/

Answer 3

您可以使用JQuery的each函数来执行此操作：

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

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

    x = $(this).index();

    $('.spanset').each(function(spanset){
        $(this).children().eq(x).css({
            'color': 'red'
        });            
    });
});

Answer 4

试试这个jsbin

$('.spanset').each( function(){
    $(this).children('span').eq(x).css(...)
});

Answer 5

您没有正确关闭spanset的div标签。将它们全部从<div>更改为</div>。

这是另一种方式：

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

x = $(this).index();
$('.spanset').each(function(){
    $('span',this).eq(x).css({
       'color': 'red'
    });
});

Answer 6

可以使用: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/

Answer 7

查看此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'
    });

});

使用.eq（）查找具有相同类的多个分隔符的索引

7 个答案: