Question

我有这个数组：

var names = [
    "Name1",
    "Name2",
    "Name3"
];

我为HTML转换为Unorder List：

for(i = 0; i < names.Length; i++){
    text += "<li>" + names[i] + "</li>";
}
text += "</ul>";


document.getElementById("choices").innerHTML = text;

现在，我得到了这个：

名1
名称2
NAME3

我对结果很满意。但是现在我想要有人点击Name2所以它alert是我的价值索引。我想要的是它应该在移动应用程序（Cordova）中，以便当用户点击列表项时，它将显示其他活动的细节（其他一些页面）。

PS：我查了一下：

var index = $( "li" ).index( this );

和

var index = $("ul li.active").index();

但似乎这些都不适合我。

我应该Dynamically assign ID's每个<li>项目？我现在该怎么办？

Answer 1

$( "li" ).index将返回关于DOM中所有li元素的元素索引。

您需要将.index()与clicked元素的jquery对象一起使用。它将在其父容器中返回元素索引：

var index = $(this).index();

Answer 2

您可以使用index方法直接获取index。

$("li").click(function () {
  alert($(this).index());
});

如果页面上有多个ul元素，并且您希望将click event绑定到某个特定element，则可以执行此操作。

要按ID绑定元素

$("#YourUlId li").click(function () {
      alert($(this).index());
});

按类

绑定点击事件

$(".YourUlClass li").click(function () {
      alert($(this).index());
});

Answer 3

动态传递id for for循环

for(i = 0; i < names.Length; i++){
    text += "<li id="+i+">" + names[i] + "</li>";
}

分配点击事件，你将通过以下代码获得id

$(li).click(function(){
   alert($(this).attr("id"));
});

Answer 4

使用原生javascript，你可以创建一个函数来提醒对应li元素值/ id的数组值的索引

首先，您可以在选项

上附加功能

document.getElementById('Name2').setAttribute('onclick','checkIndex(this)');

然后遍历数组并寻找匹配的数组值

function checkIndex(item){
  for(i=0;i<names.length;i++){
    if(names[i] == item.innerHTML){ //or item.id
      alert(names.indexOf(names[i]));
    }
  }
}

Answer 5

使用this获取当前元素

<ul>
<li>Male</li>
<li>Female</li>
</ul>

 <script>
$("li").click(function(){
 alert($(this).index())
})
 </script>

Answer 6

请参阅下面的工作代码段

＆＃13;

var names = [
    "Name1",
    "Name2",
    "Name3"
];
var text='<ul>';
for(i = 0; i < names.length; i++){
    text += "<li>" + names[i] + "</li>";
}
text += "</ul>";
document.getElementById("choices").innerHTML = text;

$('li').on('click',function(){
  alert($(this).index())
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choices"></div>

＆＃13;

Answer 7

我会以声明的方式处理它，使用由jquery处理的html数据属性。见here

这是一个例子。

>> student_schedule_options = student_1_requests.permutation.select { |p| p.each_with_index.all? { |request, i| schedule[i].include?(request) } }
=> [[:EEN41, :SDN11T, :TYN21T, :PPN41, :ZLUNCH, :HUN11, :AUN21T, :ZJPHN],
 [:EEN41, :HUN11, :TYN21T, :PPN41, :ZLUNCH, :SDN11T, :AUN21T, :ZJPHN]]

var names = ["jack", "mary", "lou", "andrew"];
var text = "<ul>";
for (var i = 0; i < names.length; i++) { 
  text += "<li data-id='" + i + "'>" + names[i] + "</li>";
}
text += "</ul>";
document.getElementById("choices").innerHTML = text;

$("li").click(function(e){
   alert($(this).data("id"));
});

当然你可以随意更改data-id，或者添加其他属性（data-page？data-txt？）并以适当的方式处理所有这些。

此外，动态为您的列表分配ID是可能的，但我更喜欢这个，因为我发现它更灵活。

获取来自Array的列表中的项目索引

7 个答案: