Question

我有一个列有mouseover事件的列表：

myObject = function()
{

    this.listTemplate = $("<ul></ul>")
        .mouseover(function(event) {
          //Do mouse over stuff
        })
        .click(function(event) {
          //Do click stuff
        });

    //...more stuff
}

稍后在我的代码中，我正在使用Ajax调用返回的项目填充此列表，这些项目都可以顺利运行...

在Ajax成功方法中：

//...
$(items).each(function(item) {
    $("<li />").append("<a />").text(item.value)
   .appendTo(templateList);
});
//...

在我的mouseover事件中，event.target按预期返回锚点，但我需要锚点li祖先（在ul内）的索引徘徊过来。

鉴于li的内容可能比锚点更复杂，jQuery是否提供了一种简单的方法来查找它？

即。我徘徊在li[0]或li[4]等的后代......

Answer 1

您可以使用.index()，如下所示：

.mouseover(function(e) {
  var i = $(e.target).closest('ul').children().index($(e.target).closest('li'));
})

来自文档：

如果在元素集合上调用.index()并传入DOM元素或jQuery对象，.index()将返回一个整数，指示传递的元素相对于原始集合的位置。

这取决于<ul>，获取它的子项（<li>元素），并获取包含该集合中链接的<li>的索引。

或者，不是使用event.target，而是可以使用.delegate()更干净地完成此操作，如下所示：

$("&lt;ul&gt;&lt;/ul&gt;").delegate('li', 'mouseover', function() {
  var index = $(this).index();
})

在这种情况下，this引用<li>，因此正常的.index()调用只是得到它相对于它的兄弟姐妹的索引，如果它是一个选项...它是一个更简单的路线采取。

最后，与问题相关，您不需要编码<和>，您可以拥有：

$("<li />").append("<a />").text(item.value)

如果您正在执行此操作以进行XHTML /验证，just wrap your script in CDATA to validate correctly。

如何在另一个祖先中获得祖先的索引？

1 个答案: