使用javascript将id插入列表元素

Using javascript to insert id into list elements

本文关键字：插入 列表元素 id javascript 使用      更新时间：2023-09-26

我在摆弄我做的一副牌。我设置了它，这样就有一种方法可以根据花色将牌列出来，所以如果我想要黑桃，我就得到所有黑桃牌的<ol>。我现在试图给每个<li>元素一个id，这取决于它是什么牌。例如，a是<li id="ace"><img src="ace_spades.gif"/></li>, king是<li id="king"><img src="king_spades.gif"/></li>。这个列表是按照从上到下的顺序排列的。我试着这样做:

var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
var counter=0;
while (counter<=12)
    {
    $(document).ready(function(){
    $("li").eq(counter).attr("id", card_id[counter])
        });
    counter++;
    }

但它不起作用。除了简单的jquery之外，我之前并没有真正用javascript做过任何事情。我说错了什么?

试试这个:

$(document).ready(function(){
    var card_id = ["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
    $.each(card_id, function(i,id){
        $("li").eq(i).attr('id',id);
    });
});

您应该尝试只使用一个$(document).ready()函数，而不必使用while()循环。

我认为你不需要在while中调用$(document).ready()函数。试试这个:

var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
var counter=0;
while (counter<=12){
    $("li").eq(counter).attr("id", card_id[counter]);
    counter++;
 }

您不需要文档准备函数。将脚本放在</body>之前和jquery.js脚本之后。这对我很有效。

查看工作示例http://jsfiddle.net/H8MeG/2/

第一个ID的网页必须是唯一的。有些浏览器可能会忽略已经使用过的元素的id。其他浏览器可能完全失败…第二。您不应该像那样使用.eq()。你绝对不应该添加12个新的$(document).ready()语句。

下面是一个更可靠的版本和jsfiddle

上的示例
var card_id=["ace","king","queen","jack","ten","nine","eight","seven","six","five","four", "three","two"];
$("#spades li").each(function(index){
    $(this).attr("class", card_id[index]);
    $(this).text(card_id[index]);
});

我还添加了$(this).text(card_id[index]);，所以你看到它实际上是有效的。尝试为具有相同特征的多个元素使用类

为什么要乱搞id呢?你知道第一项是a，第二项是k，以此类推。ol.getElementsByTagName("李")[12]="恶运"

相关文章：