javascript - jQuery - 按容器选择和分组一组元素

Question

我需要根据图像链接的 <DIV> 选择一组图像链接并将其分组。或 <UL>容器。

例如，在这个 HTML 中:选择前两个链接，在它们上面附加我的函数，选择接下来的两个链接，运行函数......等等

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

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

有什么建议吗？

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