HTML / Javascript: выбор дяди / тети

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, вложенных в div.tools, представляют собой маленькие кнопки. div.toggleNotes Мне нужно выбрать div.notes в функции javascript / jquery. 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 и т. Д. Я в основном смотрю на вкладку DOM в Firebug.

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'

---

EDIT:

В качестве альтернативы, если вы хотите, вы можете использовать .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/

Answer 2

Вы можете использовать селектор jQuery .closest () для этого, но кажется, что вы можете использовать классы или идентификаторы для выполнения этого менее сложным способом.

Answer 3

А как же:

$("div:.addChunk").live('click', function() {
    create_chunk($(this).parent().parent());
});

$("div:.toggleNotes").live('click',function() {
    toggle_notes($(this).parent().siblings('div:.chunkContent').find('div:.notes'));
});​