javascript - HTML/Javascript : Selecting uncles/aunts

Question

所以我有一些代码，

<div class="chunk" id="">
    <div class="chunkContent">
        <div class="textLeft" ></div>
        <div class="textRight" ></div>
        <div class="notes border">Notes...</div>
    </div>
    <div class="tools fl">
        <div class="toggleNotes border">n</div>
        <div class="addChunk border">+</div>
    </div>
</div>

现在，div.tools 中嵌套的两个 div 是小按钮。 div.toggleNotes 我需要在 javascript/jquery 函数中选择 div.notes。 div.addChunk 我需要选择第一个div，div.chunk。目前，我正在这样做:

$(".addChunk").live('click', (function(){create_chunk(this.parentNode.parentNode)}))
$(".toggleNotes").live('click',function(){toggle_notes(this.parentNode.parentNode.firstElementChild.lastElementChild)})

有没有比将parentNotes和firstElementChild等串在一起更好(即更合适)的方法来做到这一点？我基本上是在 firebug 中查看 DOM 选项卡。

Answer 1

既然您用 jQuery 标记了您的问题，我假设您愿意使用它的遍历方法。这将确保跨浏览器支持。

如果是这样，你可以这样做:

&(".addChunk").live('click', function(){
   create_chunk($(this).closest('.chunk')); // Get closest ancestor with class 'chunk'
});

$(".toggleNotes").live('click',function(){
   toggle_notes($(this).parent().prev().find('.notes'));  // Get parent element, traverse
});                                                       //  to its previous sibling,
                                                          //  and find element with 'notes'

<小时/>

编辑:

或者，如果您愿意，也可以将 .closest() 用于 toggle_notes。

$(".toggleNotes").live('click',function(){
   toggle_notes($(this).closest('.chunk').find('.notes'));
});  

<小时/>

相关 jQuery 文档:

• .closest() - http://api.jquery.com/closest/
• .parent() - http://api.jquery.com/parent/
• .prev() - http://api.jquery.com/prev/

• .find() - http://api.jquery.com/find/

• jQuery 遍历方法 - http://api.jquery.com/category/traversing/