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

将ID存储在链接中是不是更好，然后在你的hander上，通过id找到内容div，并执行触发器？这样你就不会被绑定到特定的层次结构。

Answer 3

我推荐了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 4

您可以使用xpath一次性从A到DIV吗？

编辑：显然xpath选择器不再是jquery（感谢评论中指出这一点的人）

Answer 5

出乎我的意料：

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

Answer 6

我同意Sprintstart

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

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

然后你可以更多地关注触发编辑事件的jQuery语句。

Answer 7

我认为很难阅读，因为你不得不从一个元素上升到另一个元素。如果您从公共容器引用这两个路径，那么这些路径似乎更有意义。

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

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

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

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

7 个答案: