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, 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 2

因为您可能在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 3

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

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

Answer 4

您是否可以将选择器与子属性一起使用？

即：

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

上面将选择所有div和uls（可能想要在这里应用特定的样式或某些东西，只选择你想要的那些）然后它会让孩子成为一个元素。

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

4 个答案: