访问父母的最近子女

Question

I have an overall 'parent' div with several children. In each child there is 1 or 2 grandchildren.

Say I have a variable holding a child, of the 4 ^th child. This is the hierarchy: parent > child4 > secondGrandChild . (View code below for the names.) I then want to access the closest previous secondGrandChild to it.

So basically it should go to child3 , check if it has secondGrandChild in it. If it does, great, if not it should go to the previous one and do the same check.

Here's what I tried, but it said it didn't exist:

console.log($('#grandChild4').parent().closest('.chlid > secondGrandChild').offset().left);

Here's the hierarchy: (Note, not every child will have secondGrandChild .)

<div class- "parent">
    <div class="child" id="child1">
        <div class="firstGrandChild"></div>
        <div class="secondGrandChild" id="grandChild1"></div>
    </div>
    <div class="child" id="child2">
        <div class="firstGrandChild"></div>
        <div class="secondGrandChild" id="grandChild2"></div>
    </div>
    <div class="child" id="child3">
        <div class="firstGrandChild"></div>
        <!-- <div class="secondGrandChild" id="grandChild3"></div> -->
    </div>
    <div class="child" id="child4">
        <div class="firstGrandChild"></div>
        <div class="secondGrandChild" id="grandChild4"></div>
    </div>
    <div class="child" id="child5">
        <div class="firstGrandChild"></div>
        <div class="secondGrandChild" id="grandChild5"></div>
    </div>
</div>

Answer 1

You could try something like this,

var $secondGrandChilds = $('.child > .secondGrandChild');
var currentIndex = $secondGrandChilds.index($('#grandChild4'));
var item = $secondGrandChilds.get(currentIndex-1);

console.log($(item).offset().left);

http://jsfiddle.net/k9gu16v6/1/

Edit

Or better,

var $item = $('#grandChild4').parent()
                             .prevAll('.child')
                             .find('.secondGrandChild')
                             .last()

console.log($item.offset().left);

http://jsfiddle.net/k9gu16v6/3/

Answer 2

You'll need to use .parent() and .prev() and .children() like so:

var start =  $('#grandChild4').parent();
while( start.prev('.child').length && !start.prev().children('.secondGrandChild').length ) {
    start = start.prev('.child');
}
if( start.prev('.child').length ) {
    console.log( start.prev().children('.secondGrandChild').offset().left );
}   

  var start = $('#grandChild4').parent(); while( start.prev('.child').length && !start.prev().children('.secondGrandChild').length ) { start = start.prev('.child'); } if( start.prev('.child').length ) { console.log( start.prev().children('.secondGrandChild').offset().left ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="parent"> <div class="child" id="child1"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild1"></div> </div> <div class="child" id="child2"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild2"></div> </div> <div class="child" id="child3"> <div class="firstGrandChild"></div> <!--div class="secondGrandChild" id="grandChild3"></div--> </div> <div class="child" id="child4"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild4"></div> </div> <div class="child" id="child5"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild5"></div> </div> </div> 

Answer 3

Syntax error at html at <div class- "parent" ? ; no .chlid element appear to exist within document ; missing . at .closest('.chlid > secondGrandChild') , try substituting .child for .chlid at selector

Try correcting syntax errors , using .cloest() , .siblings() , .index() , eq() , .find()

 var child = $("#grandChild4"), elem = ".child", el = ".secondGrandChild"; console.log( child // closes `.child` .closest(elem) // filter siblings to return `.child` // at index before `elem` in `.child` collection .siblings(elem).eq(child.index(elem) - 1) // find `elem` : `".secondGrandChild"` .find(el) .offset().left ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="parent"> <div class="child" id="child1"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild1"></div> </div> <div class="child" id="child2"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild2"></div> </div> <div class="child" id="child3"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild3"></div> </div> <div class="child" id="child4"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild4"></div> </div> <div class="child" id="child5"> <div class="firstGrandChild"></div> <div class="secondGrandChild" id="grandChild5"></div> </div> </div>