jQuery - ищет лучший синтаксис селекторов

Question

У меня есть HTML-код, который выглядит примерно так:

<li id="someid-11">

<img src="..." alt="alt" />
<h2><a href="somelink"> sometext </a>
    <span><a class="editcontent" href="?action=editme">Edit</a></span>
</h2>
<div id="11" class="content">
 <!-- // content goes here -->
 <div class="bottom_of_entry"> </div>

</li>

Я использую a.editcontent для активации метода редактирования на месте в div.content. Мой текущий селектор выглядит так

jQuery('a.editcontent').bind('click', (function(){
    jQuery(this).parent('span').parent('h2').next('.content').trigger('edit');
}

Работает, но ужасно. Должен быть какой-то лучший способ сделать это, верно?

Answer 1

Я думаю, использование некоторых мета-атрибутов было бы лучшим решением.

<li id="someid-11">

<img src="..." alt="alt" />
<h2><a href="somelink"> sometext </a>
    <span><a rel="11" class="editcontent" href="?action=editme">Edit</a></span>
</h2>
<div id="11" class="content">
 <!-- // content goes here -->
 <div class="bottom_of_entry"> </div>

</li>

(добавлен rel = "11" к ссылке)

А потом в JavaScript:

$( 'a.editcontent' ).click(function()
{   
    $( '#' + $(this).attr( 'rel' )).trigger( 'edit' );
});

Answer 2

Я рекомендовал решение Sprintstar. но если вам это не нравится, используйте это:

$("a.editcontent").click(function(){
    $(this).parents("h2").next(".content").trigger("edit");
});

Если у вас есть более одного "h2":

$("a.editcontent").click(function(){
    $(this).parents("h2:first").next(".content").trigger("edit");
});

Answer 3

Не лучше ли сохранить идентификатор в ссылке, а затем на странице, найти содержимое div по идентификатору и выполнить триггер? Таким образом, вы не привязаны к определенной иерархии.

Answer 4

Я согласен со Sprintstart

var clickHandler = function (link) {
     $(link.data.action).trigger("edit");
}

$('a.editconent').bind('click', {action:'.content'}, clickHander);

Тогда вы можете быть гораздо более мишенью для оператора jQuery, который запускает событие редактирования.

Answer 5

Из моей головы:

$("a.editcontent").click(function(){
    $(this).parents("h2").slice(0, 1).next(".content").trigger("edit");
});

Answer 6

Вы, вероятно, можете использовать xpath, чтобы добраться от A до DIV за один раз?

Редактировать: Судя по всему, селекторы xpath больше не присутствуют в jquery (спасибо парню в комментариях за указание на это)

Answer 7

Я думаю, что его трудно читать, потому что вам нужно переходить от одного элемента к другому. Если вы ссылаетесь на оба из общего контейнера, эти пути будут казаться более значимыми.

var listitem11 = $("#someid-11");

listitem11.find('a.editcontent').bind('click'), (function(){
     listitem11.find('.content').trigger('edit');
}

Теперь я подозреваю, что у вас есть несколько элементов списка, и в этом случае вам понадобится замкнутый цикл, в котором он ранее не был нужен. Тем не менее я думаю, что это ставит вас вперед.