jQuery-寻找更好的选择器语法

我认为使用一些元属性会是一个更好的解决方案。

<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' );
});

我推荐了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");
});

将id存储在链接中,然后在您的hander上,按id查找内容div,并执行触发器,这样不是更好吗?这样,你就不会被束缚在特定的层次结构中。

您可能可以使用xpath一次性从A到达DIV?

编辑:显然,jquery中不再有xpath选择器了(感谢评论中的家伙指出了这一点)

从我的脑海里:

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

我同意Sprintstart

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

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

然后,您可以更专注于触发编辑事件的jQuery语句。

我认为这很难阅读,因为你必须从一个元素向上回到另一个元素。如果你从一个共同的容器中引用这两条路径,这些路径似乎更有意义。

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

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

现在我怀疑你有多个列表项需要处理,在这种情况下,你需要一个以前不需要的封闭循环。但我仍然认为这会让你领先。