CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjquery-selectors
Royi Namir
Royi Namir

Reputation: 148524

Get all elements like myself in jQuery?

Lets say I have this structure ( no classes , no Id's): - it's a location finding question

The d[0,1,2] are pure divs . no class no id.

div (d0) wrapps a repeating structure like :

enter image description here

And let's say I have $(this) as the first d1

Is there any traverse function , method , solution for getting the other 2 d1 ? ( or all d1's.it doesn't matter..)

I'll prase it with words :

I'm $(this)=d1. I have a parent ( which is d2 , can be more ....this is just for my sample) which has a parent (d3 ) and hence, I have 2 more exact elements like me.

how can I get them ? JSBIN

edit

Maybe I wasn't clear but I don't have to know the structure. I just have $(this) and it should find by itself other twins relative to d0 ( as same as its position)

so it should be something like : 

function getLikeMyself(objWhichIsThis , contextDivElement)
{
}

execute : getLikeMyself(theDivWhishIsThis, divElemtnWhichIs_d0)

Upvotes: 4

Views: 841

Answers (3)

Alexander
Alexander

Reputation: 23537

This is my new try, a .me() method that will return you the selector of the current element built up until the body.

$.fn.me = function(){
  return this.first().parentsUntil("body").andSelf().map(function(){
    return this.tagName;
  }).get().join(">");
};

Usage:

var selector = $(this).me();
var $twins = $(selector);

See it here.

An alternative version that accepts a root element as an argument:

$.fn.me = function(root){
  return this.first().parentsUntil(root).andSelf().map(function(){
    return this.tagName;
  }).get().join(">");
};

Usage:

var selector = $(this).me("#root");
var $twins = $(selector, "#root");

See it here.

A third version that keeps the relative position of the descendants of the topmost element under the root element. For example, it will return DIV>DIV:nth-child(1)>SPAN:nth-child(2) instead of a generic DIV>DIV>SPAN selector.

$.fn.me = function(root){
  return this.first().parentsUntil(root).andSelf().map(function(){
    var eq = i ? ":nth-child(" + ($(this).index() + 1) + ")" : "";
    return this.tagName + eq;
  }).get().join(">");
};

Usage:

var selector = $(this).me("#root");
var $twins = $(selector, "#root");

Upvotes: 5

Ja͢ck
Ja͢ck

Reputation: 173562

You can iterate over each parent node and descend into their corresponding siblings, using the path that was built up on the way down:

var chain = [$('#imthis').prop('nodeName')];

$('#imthis')
  .parentsUntil('body')
  .each(function() {
    // i'm a parent
    $(this).siblings()
      .find(chain.join('>'))
    .each(function() {
      alert(this.textContent);
    });
    chain.unshift(this.nodeName);
  });

Demo

Upvotes: 1

m90
m90

Reputation: 11822

You could use a recursive function to "bubble up" the DOM until you reach the body element, then reverse this tree and use it as a selector. A little like:

function getChain(el){

    var parents = arguments[1] || [el.nodeName.toLowerCase()];

    if (el.parentNode.nodeName != 'BODY'){

        parents.push(el.parentNode.nodeName.toLowerCase());
        el = el.parentNode;

        return getChain(el, parents);

    } else {

        return parents.reverse().join('>');

    }

}

See a demo fiddle

Upvotes: 1

Related Questions