Javascript jQuery—按容器选择并分组一组元素

我需要根据它们的

或

容器选择一组图像链接并将其分组

例如，在此HTML中：选择前两个链接，在它们上附加my函数，选择下两个链接，运行函数。。。等等

DIV
  LINK
  LINK

  DIV
    LINK
    LINK

    UL
      LINK
      LINK
    /UL

  /DIV

  UL
    LINK
    LINK
  /UL

/DIV

LINK
LINK

...

（每个div/ul可以有任意数量的链接）

现在我有这个：

$('div').each(function(index){
  var elements = $(this).find('a').filter(function(){
    return !!this.href.match('(\.jpg|\.jpeg|\.png|\.gif)$');
  });

  console.log('------' + index + '------');
  console.log(elements);
});

它将链接向下过滤，仅过滤到图像链接。 但是它并没有像我想要的那样对它们进行分组，我的函数在同一个元素上运行了不止一次

---

有什么建议吗？

我想这就是你想要的，但我不确定你到底想对元素做什么：

   $('div > img').each(function(index) {

      if ((index % 4) === 1)
        // do something to every first element in a group of 4
      if ((index % 4) === 2)
        // do something to every second element in a group of 4
      if ((index % 4) === 3)
        // do something to every third element in a group of 4
      if ((index % 4) === 0)
        // do something to every fourth element in a group of 4
   });

---

我认为这是您想要的，但我不确定您想要对元素做什么：

   $('div > img').each(function(index) {

      if ((index % 4) === 1)
        // do something to every first element in a group of 4
      if ((index % 4) === 2)
        // do something to every second element in a group of 4
      if ((index % 4) === 3)
        // do something to every third element in a group of 4
      if ((index % 4) === 0)
        // do something to every fourth element in a group of 4
   });

---

不能将选择器与子属性一起使用吗

即：

---

上面的命令将选择所有div和ul（可能需要应用特定样式或此处的某些内容以仅选择所需的样式），然后它将获取子a元素。

不能将选择器与子属性一起使用吗

即：

---

上面将选择所有的div和ul（可能需要应用特定的样式或此处的某些内容来仅选择您想要的），然后它将获得子元素a元素。

如果您只需要将这些内容组合在一起，可能类似的方法对您适用

$("div, ul, body").each(function(index, elm) {
    $(elm).children("a").text(function(i, text) {
        return text + "index: " + index;
    });
    $(elm).children("li").children("a").text(function(i, text) {
        return text + "index: " + index;
    });
});

使用您的标记：

<DIV>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <DIV>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <UL>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
        </UL>
    </DIV>
    <UL>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
    </UL>

</DIV>
<a href="#">Link 9</a>
<a href="#">Link 10</a>

---

如果你只需要把事情组合在一起，也许像这样的事情对你会有用

$("div, ul, body").each(function(index, elm) {
    $(elm).children("a").text(function(i, text) {
        return text + "index: " + index;
    });
    $(elm).children("li").children("a").text(function(i, text) {
        return text + "index: " + index;
    });
});

使用您的标记：

<DIV>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <DIV>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <UL>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
        </UL>
    </DIV>
    <UL>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
    </UL>

</DIV>
<a href="#">Link 9</a>
<a href="#">Link 10</a>

---

因为您可能在DIV/UL和A之间有元素，例如LI，您可以从选择A和“分组”它们开始：

---

因为您可能在DIV/UL和A之间有元素，例如LI，您可以从选择A和“分组”它们开始：

---

你的最终结果是什么？你能不能只做

$（“a”）.filter（function（）{}）.DoSomething（）

？是的，但我需要为每组链接提供某种唯一的ID，我想使用div/ul的

索引

…你的最终结果是什么？你能不能只做

$（“a”）.filter（function（）{}）.DoSomething（）

？是的，但我需要为每组链接提供某种唯一的ID，我想使用div/ul的

索引

。。。