Question

I am using Jquery 1.7.2.

I want to transverse Html Elements Till a Specifc Attribute (id) using Jquery on
mouse over on any html element in my page.

we have parents() function but problem is how to select stop on the parent element which has id attribute

$("*", document.body).click(function (e) {
  e.stopPropagation();
  var domEl = $(this).get(0);      
      var parentEls = $(domEl).parents()
        .map(function () { 
              return this.tagName; 
            })
        .get().join(", ");

$(“b”).append(“” + parentEls + ““);
});

this is code but i am getting all element till root
but i want to stop on a closet elements which has attribute id in the tag

Please help me out .

Answer 1

Just use closest:

$(this).closest('#the-id');

---

Unless your’e just looking for the closest one that has any id attribute, which would be:

$(this).closest('[id]');

---

Edit: after seeing your updated question, this should be what you want:

$(document).click(function(e) {
    e.preventDefault();
    var parents = $(e.target).parentsUntil('[id]')
        .map(function() { return this.tagName; }).get().join(',');
    console.log(parents);
});

Note that this approach accomplishes what you want without selecting and binding click events to every node in the DOM, which is a pretty heavy handed approach.

---

Edit (again): looks like maybe you wanted to include the tag with the id attribute on it (the above solution is everything up to, but not including that tag). To do this, the solution is pretty similar:

$(document).click(function(e) {
    e.preventDefault();
    var $parents = $(e.target).parentsUntil('[id]');
    var tagNames = $parents.add($parents.parent())
        .map(function() { return this.tagName; }).get().join(',');
    console.log(tagNames);
});