javascript-从列表中的选定项目获取属性值

在MVC应用程序中,我有一个列表：

<ul>
 <li class="list-item" data-action="open" data-id="1"><form>...A..<form/></li>
 <li class="list-item" data-action="open" data-id="2"><form>...B..<form/></li>
 <li class="list-item" data-action="open" data-id="3"><form>...C..<form/></li>
</ul>

如何从选定的li获取data-id属性？

我已经在Jquery中尝试了以下代码：

  this.$list = this.find("ul").first(); 
  this.$list.on("click", "[data-action=\"open\"]", function (e) {

         var x = e.currentTarget.parentElement;//it brings me all the li elements , not just the one that was selected
         var elem=x.data('id');
    });

解决方法:

试试这个：您已经在ul下为lis注册了click事件处理程序.因此,只需读取$(this).data(‘id’)即可获取所单击li的data-id,而不是从其父元素即e.currentTarget.parentElement中读取它.

注意：-我没有在以下代码中将其删除.

var $list = $(document).find("ul").first(); 
$list.on("click", "li[data-action=\"open\"]", function (e) {
  var elemId =$(this).data('id');
  alert(elemId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="list-item" data-action="open" data-id="1"><form>...A..<form/></li>
 <li class="list-item" data-action="open" data-id="2"><form>...B..<form/></li>
 <li class="list-item" data-action="open" data-id="3"><form>...C..<form/></li>
</ul>