7

我想选择一组 jQuery 元素中的每一个。

例如。

<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）的所有其他元素？
4

3 回答 3

11

您可以使用将$.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;    
    });
于 2012-08-19T10:54:55.810 回答
7

工作演示

(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()可以互换使用，因为列表项中没有任何嵌套元素；不过一般来说，前者只向下搜索一个级别，而后者搜索所有后代（如果你知道你只想向下一级，那效率就不高了）。

于 2012-08-19T11:14:18.297 回答
1

我只是在一般意义上回答，您可以说扩展您的问题定义（因此它对许多人有用）。

假设您要选择每个第 3 个元素，但元素的开头不一定是第 3 个元素。如果您想将第一个元素作为开始元素意味着选择应该是 A、D、G 或跳过这些元素跟随

  1. $('li:nth-child(3n - 2)')
  2. $('li').not(':nth-child(3n- 2)')

这里 3 of "3n" 将选择第三个元素，而 "- 2" 将选择带到第一个元素。

广义形式

  1. $('li:nth-child(3n - x)')
  2. $('li').not(':nth-child(3n- x)')

这里x是变量来定义第一个元素，如前所述。多于

谢谢和问候，
Rk_Hirpara

于 2016-07-14T10:40:21.037 回答