jQuery-按属性选择元素，但索引返回不带属性的元素的值

Question

function check(){
    $('.left').removeClass('left');
    $('.right').removeClass('right');

    $('.item[style*="display: block"]').each(function(index){
        console.log('checking...');
        console.log($(this));
        console.log($(this).index()%2);

        if ($(this).index()%2==0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}

<div class="item" style="display:block"></div> 
<div class="item" style="display:block"></div> 
<div class="item" style="display:block"></div> 
<div class="item" style="display:none"></div> 
<div class="item" style="display:block"></div>

这是我的代码。 仅仅应该将left类和right类添加到具有.item类并具有display:block的奇数和偶数元素中。 但是index()行为就像我选择了.item类的所有元素而没有选择属性一样。 谁能解释我为什么以及如何解决这个问题？

Answer 1

使用过滤器过滤所需的元素。 然后使用每个来迭代jquery对象以匹配奇数和偶数

function check() {

    $('.left').removeClass('left');
    $('.right').removeClass('right');
    $('.item').filter(function() {
        return $(this).css('display') == 'block';
    }).each(function(index) {
        console.log(index);
        if (index % 2 == 0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}

check()

JSFIDDLE

Answer 2

我建议改为以下内容：

function check() {

  // select all elements with the class-name of 'left'
  // or 'right':
  $('.left, .right')
    // from those elements remove the class-names 'left'
    // and 'right' if either or both is present (if
    // neither class is present this generates no errors):
    .removeClass('left right');

  // select all '.item' elements whose 'style' attribute
  // features the string 'display:block'; and iterate
  // over that collection using the anonymous function of
  // the addClass() method:
  $('.item[style*="display:block"]').addClass(function(i){
      // i: the index of the current element in the
      // collection:

      // i%2 return 0 then we return the 'left' class-name
      // to be added; otherwise we return the 'right'
      // class-name to be added:
      return i%2 === 0 ? 'left' : 'right';
  });
}

 function check() { $('.left, .right').removeClass('left right'); $('.item[style*="display:block"]').addClass(function(i) { return i % 2 === 0 ? 'left' : 'right'; }); } check(); 

 div.left { color: limegreen; } div.right { color: red; } div::before { content: attr(class); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item" style="display:block"></div> <div class="item" style="display:block"></div> <div class="item" style="display:block"></div> <div class="item" style="display:none"></div> <div class="item" style="display:block"></div> 

在普通的JavaScript中，通过以下操作同样可以实现上述功能：

function check() {

  // Using Array.from to convert the results of the
  // call to document.querySelectorAll() into an
  // Array:
  Array.from(

    // selecting all '.left' and '.right' elements
    // in the document:
    document.querySelectorAll('.left, .right')

  // using Array.prototype.forEach() to iterate over
  // the resulting Array:
  ).forEach(function(el) {
    // 'el': the current element in the Array of elements
    //       over which we're iterating.

    // here we use the Element.classList API to remove both
    // the 'left' and 'right' class-name(s) from all
    // elements (no errors if a class-name isn't present):
    el.classList.remove('left', 'right');
  });
  // As above, to convert an Array-like collection into
  // an Array:
  Array.from(

    // here we select all elements with the class of 'item',
    // which also have the string 'display:block' present
    // in their 'style' attribute-value:
    document.querySelectorAll('.item[style*="display:block"]')

  // iterating over that resulting Array:
  ).forEach(function(el, i) {
    // el: as above, the current element of the Array,
    // i:  the second argument, the index of the
    //     current array-element in the array over
    //     which we're iterating.

    // here we add the class-name 'left', if the remainder
    // of the current index/2 is equal to 0; otherwise
    // we add the 'right' class-name:
    el.classList.add(i % 2 === 0 ? 'left' : 'right');
  });
}

check();

 function check() { Array.from(document.querySelectorAll('.left, .right')).forEach(function(el) { el.classList.remove('left', 'right'); }); Array.from(document.querySelectorAll('.item[style*="display:block"]')).forEach(function(el, i) { el.classList.add(i % 2 === 0 ? 'left' : 'right'); }); } check(); 

 div.left { color: limegreen; } div.right { color: red; } div::before { content: attr(class); } 

 <div class="item" style="display:block"></div> <div class="item" style="display:block"></div> <div class="item" style="display:block"></div> <div class="item" style="display:none"></div> <div class="item" style="display:block"></div> 

参考文献：

• CSS：
  • 属性选择器 。
• JavaScript：
  • Array.from() 。
  • Array.prototype.forEach() 。
  • document.querySelectorAll() 。
  • Element.classList 。
  • 余数（ % ）运算符 。
• jQuery的：
  • addClass() 。
  • removeClass() 。

Answer 3

下面的代码将解决您的问题。

function check(){
    $('.left').removeClass('left');
    $('.right').removeClass('right');

    $('.item[style*="display:block"]').each(function(index){
       if ((index)%2==0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}

如果您只想捕获可见元素，那么也可以使用以下代码。

function check() {
    $('.left').removeClass('left');
    $('.right').removeClass('right');

    $('.item:visible').each(function(index){
       if ((index)%2==0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}