JQuery - ищем лучший синтаксис селекторов
У меня есть 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');
}
Это работает, но некрасиво. Должен быть какой-то лучший способ сделать это, верно?
Ответы 7
Вероятно, вы можете использовать xpath, чтобы перейти от A к DIV за один раз?
Обновлено: по-видимому, селекторов xpath больше нет в jquery (спасибо парню в комментариях за указание на это)
разве селекторы xpath не были удалены из более поздних версий jQuery?
Что такое xpath? :) (погуглил сейчас)
ах ... похоже, их убрали да!
Не лучше ли сохранить идентификатор в ссылке, а затем на вашей руке найти div содержимого по идентификатору и выполнить свой триггер? Таким образом, вы не привязаны к определенной иерархии.
Я думаю, что использование некоторых мета-атрибутов было бы лучшим решением.
<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' );
});
обратите внимание, что это нарушит (X) проверку HTML, поскольку «11» не является допустимым значением для rel. (вы сами решаете, насколько это важно для себя). В любом случае у вас не может быть идентификатора, который начинается с числа - это сломается в IE. префикс его произвольной строкой букв.
Выйди с моей головы:
$("a.editcontent").click(function(){
$(this).parents("h2").slice(0, 1).next(".content").trigger("edit");
});
вместо .parents ("h2"). slice (0, 1) было бы проще и эффективнее использовать .parents ("h2: first")
Я согласен со Sprintstart
var clickHandler = function (link) {
$(link.data.action).trigger("edit");
}
$('a.editconent').bind('click', {action:'.content'}, clickHander);
Тогда вы можете быть более нацеленными на оператор jQuery, который запускает событие редактирования.
Я рекомендовал решение 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");
});
Я рекомендую вам всегда быть максимально конкретными в своих запросах. Если вам нужен первый предок h2, всегда указывайте h2: first. Это позволит остановить цикл поиска, как только он будет найден, и будет более понятным для будущих программистов, которые теперь знают, что вы определенно всегда работаете с одним элементом.
Я думаю, что это трудно читать, потому что вам нужно переходить от одного элемента обратно к другому. Если вы ссылаетесь на оба из общего контейнера, эти пути будут казаться более значимыми.
var listitem11 = $("#someid-11");
listitem11.find('a.editcontent').bind('click'), (function(){
listitem11.find('.content').trigger('edit');
}
Теперь я подозреваю, что вам нужно иметь дело с несколькими элементами списка, и в этом случае вам понадобится замкнутый цикл, в котором он вам не нужен раньше. Тем не менее, я думаю, это поможет вам продвинуться вперед.
Замечу, что идентификаторы DOM должны начинаться с буквы; таким образом id = "11" не будет работать во многих браузерах.