12

获取无序列表的单击元素索引的最佳方法是什么？

让我举个例子。假设我有以下 HTML 代码：

<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked">
         <p data-bind="text: title"></p>
    </li>
</ul>

现在我有以下 javascript 代码来获取索引：

...

self.itemClicked = function(data, item) {
    var index = $(item.target).index();
}

...

但问题是如果目标元素是<p>例如，我得到不正确的结果。那么我应该如何获取被点击<li>元素的索引呢？淘汰赛是否有一些方法或者我应该以某种方式使用jquery？

4

2 回答 2

23

我推荐使用 Knockout 的$indexcontext 属性。请参见下面的示例（JsFiddle）：

HTML

<!DOCTYPE html>
<html>
<body>
<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked.bind($data, $index())">
         <p data-bind="text: title"></p>
    </li>
</ul>
</body>
</html>
​

JavaScript

var vmodel = {
    listItems: ko.observableArray([
        {title: "Able"},
        {title: "Baker"},
        {title: "Charlie"}]),
    itemClicked: function(index) {
        alert(index);
    }
};
ko.applyBindings(vmodel);​
于 2012-11-05T17:37:04.067 回答
16

与其弄乱你的绑定，不如在事件函数中获取索引更漂亮。您可以使用,获取绑定上下文event.targetko.contextFor(element)

self.click = function (data, event) {
    var context = ko.contextFor(event.target);
    console.log(context.$index());
};
于 2016-04-21T15:58:55.553 回答