Question

I’ve got an image gallery where each item in the gallery has a unique ID I’m using to tie it to my backend so that I can run DB actions etc. I’m using the data attribute to hold the ‘imageid’ on the parent div of each image for example: data-imageid=”168″

The image gallery items have alot of nested divs so on rollover/click I find myself doing alot of the below in order to run actions:

$(this).parent().parent().attr('data-imageid');

It doesn’t feel like a clean solution or the best performance wise. How are other people handling this? What’s the best solution? Whatever the solution, this must be a problem solved everyday.

Edit: I realize my subject line is vague but it further explains where my heads at with this problem.

Answer 1

You can specify a criterion to go “up to”, so if you want to go up to the nearest div or li or whatever, either use jQuery’s .closest() or a simple upTo() function:

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  var el;
  do {
    el = el.parentNode;
    if (el && el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el)
}