I need to select and group a set of image links based on their <DIV> or <UL> container.

For example, in this HTML: select the first two links, attach my function on them, select the next two links, run the function ... and so on

DIV
  LINK
  LINK

  DIV
    LINK
    LINK

    UL
      LINK
      LINK
    /UL

  /DIV

  UL
    LINK
    LINK
  /UL

/DIV

LINK
LINK

...

(each div/ul can have any number of links)

Right now I have 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);
});

which filters down the links to only to ones that are images. but it doesn't really group them like I want and my function runs more than once on the same element...

Any suggestions?

I need to select and group a set of image links based on their <DIV> or <UL> container.

For example, in this HTML: select the first two links, attach my function on them, select the next two links, run the function ... and so on

DIV
  LINK
  LINK

  DIV
    LINK
    LINK

    UL
      LINK
      LINK
    /UL

  /DIV

  UL
    LINK
    LINK
  /UL

/DIV

LINK
LINK

...

(each div/ul can have any number of links)

Right now I have 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);
});

which filters down the links to only to ones that are images. but it doesn't really group them like I want and my function runs more than once on the same element...

Any suggestions?

• javascript
• jquery
• html
• jquery-selectors

• 1 What is your ultimate oute? Couldn't you just do $("a").filter(function(){}).DoSomething()? – Mark Coleman Commented Apr 8, 2011 at 1:43
• yes, but I need some kind of unique ID for each group of links, I though of using the index of the div/ul... – Alex Commented Apr 8, 2011 at 1:46

4 Answers 4

Because you probably have elements between the DIV's/UL's and the A, such as LI, you can start by selecting the A's and "group" them:

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

If you just need to group things together maybe something like this will work for you.

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

With your markup:

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

Will produce the following:

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

Can you not use the selector with a child property?

ie:

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

The above will select all divs and uls (might want to apply a specific style or something here to only select the ones you want) then it gets the child a elements.

I think this is what you want but I'm not sure exactly what you want to do to the 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
   });