获取已淘汰的已点击元素的索引

What is the best way to get index of clicked element of an unordered list?

获取无序列表的clicked元素索引的最佳方法是什么?

Let me provide an example. Say I have the following HTML code:

让我举个例子。说我有以下HTML代码:

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

Right now I have the following javascript code to get the index:

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

...

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

...

But the problem is the if the target element is <p> for example, I get incorrect result. So how should I get the index of the clicked <li> element? Does knockout have some method for this or I should use jquery in some way?

但问题是如果目标元素是

,例如,我得到的结果不正确。那么我应该如何获得点击的

元素的索引?淘汰赛有一些方法,或者我应该以某种方式使用jquery?

2 个解决方案

#1

I recommend using Knockout's $index context property. See example below (JsFiddle):

我建议使用Knockout的$ index context属性。见下面的例子(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);

#2

Instead of messing up your binding, it's much prettier getting the index inside the event function. You can get the binding context from the event.target, using the ko.contextFor(element)

而不是弄乱你的绑定,在事件函数中获取索引更漂亮。您可以使用ko.contextFor(元素)从event.target获取绑定上下文

self.click = function (data, event) {
    var context = ko.contextFor(event.target);
    console.log(context.$index());
};

#1