Question

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?

Answer 1

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