Question

我有一个包含几个孩子的整体'父母'div。每个孩子都有1或2个孙子。

假设我有一个抱着孩子的变量，就是4 ^th孩子。这是层次结构：parent > child4 > secondGrandChild。（查看下面的代码名称。）然后，我想访问距离它最近的secondGrandChild。

所以基本上它应该转到child3，检查其中是否有secondGrandChild。如果确实如此，那很好，如果没有，那就应该去前一个并做同样的检查。

这是我尝试过的，但它说它不存在：

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

这是层次结构:(注意，并非每个孩子都有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

你可以尝试这样的事情，

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/

修改

或者更好，

var $item = $('#grandChild4').parent() .prevAll('.child') .find('.secondGrandChild') .last() console.log($item.offset().left);

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

Answer 2

您需要使用.parent()和.prev()以及.children()，如下所示：

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

Array ( [1] => Array ( [ NO] => 1 [EIR IN] => 1545053 [CONT] => EOLU 1111111 [TYPE] => XXXX [INDEPO] => 21-11-2015 [JAM] => 13:00 [KODE VSL] => ABO [VESSEL] => ALBERT OLDENDORFF [VOY] => N001 [CONSIG] => ASTABUMI CIPTA [COND IN] => DMG [CLEAN] => DIRTY [TARE] => 2400 [GROSS] => 20000 [KAPASITAS] => 5000 [EX CARGO] => FOOD [LAST AIR)] => - - [LAST HIDRO] => - - [MANU] => 10-11 [BUILDER] => [OWNER] => APL ) [2] => Array ( [ NO] => 2 [EIR IN] => 1545052 [CONT] => EOLU 1234567 [TYPE] => IM04 [INDEPO] => 21-11-2015 [JAM] => 10:00 [KODE VSL] => 202 [VESSEL] => WAN HAI 202 [VOY] => N 001 [CONSIG] => ANUGERAH AGUNG LUMIN [COND IN] => AVL [CLEAN] => DIRTY [TARE] => 2400 [GROSS] => 20000 [KAPASITAS] => 1000 [EX CARGO] => MAKANAN [LAST AIR)] => - - [LAST HIDRO] => - - [MANU] => 11-13 [BUILDER] => [OWNER] => APL ) ) html处的语法错误？ ;文档中似乎不存在<div class- "parent"元素;在.chlid上遗失.，请尝试用.closest('.chlid > secondGrandChild')替换.child选择器

尝试使用.chlid，.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
);

访问父母最亲近的孩子

3 个答案: