jQuery - 按容器选择一组元素并将其分组

Question

我需要根据

或

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

例如，在此 HTML 中：选择前两个链接，在其上附加我的函数，选择接下来的两个链接，运行函数...等等

DIV
  LINK
  LINK

  DIV
    LINK
    LINK

    UL
      LINK
      LINK
    /UL

  /DIV

  UL
    LINK
    LINK
  /UL

/DIV

LINK
LINK

...

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

现在我有this：

$('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);
});

将链接过滤为仅图像链接。 但它并没有真正像我想要的那样对它们进行分组，并且我的函数在同一元素上运行多次......

有什么建议吗？

Answer 1

因为您可能在 DIV/UL 和 A 之间有元素，例如 LI，所以您可以首先选择 A 并将它们“分组”：

var groups =  [];
$('a')
  .filter(function(){ return !!this.href.match('(\.jpg|\.jpeg|\.png|\.gif)
); })
  .map(function(idx,el) { return [$(this).closest("div, ul"), $(this)]; })
  .each(function(idx,el) { 
        var c= el[0];
        var imglink = el[1];
        if(!c.data("groupId")) {
           c.data("groupId", groups.length);
           groups.push({ "container": c, "links": [] });
        }
        groups[c.data("groupId")].links.push(imglink);
  });

// optional: remove the "groupId" data() from the container DOM elements:
$.each(groups, function(idx,el) { el.container.data("groupId", null); });

Answer 2

如果您只需要将事物组合在一起，也许这样的东西适合您。

$("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>

将生成以下内容：

Link 1index: 1 Link 2index: 1
Link 3index: 2 Link 4index: 2
Link 5index: 3
Link 6index: 3
Link 7index: 4
Link 8index: 4
Link 9index: 0 Link 10index: 0

Answer 3

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

即：

$('div, ul').each(function(index){
    var elements = $(this).child('a');
    //run foreach on elements
});

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

Answer 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
   });