jQuery集中的每个第n个元素

Question

我想在jQuery元素集中选择每个nth.

例如.

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

1. 如何选择每个第三个(C和F)元素？
2. 如何选择同一组中不是每三个(A,B,D,E,G)的所有其他元素？

Answer 1

您可以使用$.grep传递回调集合中的每个元素及其索引(基于0)的函数.因此,您需要决定要保留哪一个:

var elements = $('<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li></ul>').find('li');
var result = $.grep(elements, function(element, index) {
    return (index + 1) % 3 == 0;
});

如果你想要其他元素只是反转条件: (index + 1) % 3 != 0

另一种可能是使用该.filter()功能:

var result = $('<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li></ul>')
    .find('li')
    .filter(function(index) {
        return (index + 1) % 3 == 0;    
    });

Answer 2

工作演示

(1) $('li:nth-child(3n)')- 选择每三个列表项

http://api.jquery.com/nth-child-selector/

(2) $('li').not(':nth-child(3n)')- 选择其他人

http://api.jquery.com/not/

如果您在 DOM 中没有元素，而只有在问题中指定的字符串中，请将这些技术与 .children()：

var thirds = $('<ul><li>A</li>...</ul>').children('li:nth-child(3n)');

var others = $('<ul><li>A</li>...</ul>').children('li').not(':nth-child(3n)');

在这种情况下，.children()并且.find()可以互换使用，因为列表项中没有任何嵌套元素；但总的来说，前者只搜索一个级别，而后者搜索所有后代（如果您知道只想向下一级，则效率不高）。