如何添加文本以跨越jQuery

Question

我有這個jQuery代碼，我用來創建一個動態菜單

function createList(test){
      alert(test);
        $('#nav')
        .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span class="down"></span></a></li>');
        $('.down').text(test);
    }

我遇到的問題是當我嘗試將文本添加到跨度時

$('.down').text(test);

如果我的值是abcde，則菜單會更改為最后一個值，然后我的所有菜單eeeee都可以幫助我

Answer 1

您可以嘗試使用此選項僅選擇最后一個.down而不是全部：

$('.down:last').text(test);

Answer 2

你為什么不直接這樣做：

 function createList(test) {
     alert(test);
     $('#nav')
         .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span class="down">' + test + '</span></a></li>');
 }

Answer 3

選擇器$('.down')選擇與每一類元素down

如果要選擇上次創建的.down使用以下命令：

$('.down:last').text(test);

Answer 4

$('.down').each(function(){
    $(this).text(test);
});

Answer 5

我假設你為每個菜單項多次調用createList（），但是這個函數創建了一組具有相同類的li，稱為“down”。 然后，您正在修改該類（即所有具有“向下”類的li）。 你想要的是為每個li分配一個唯一的id。

這是小提琴解決方案：
http://jsfiddle.net/acturbo/vZAee/2/

這應該工作：

function createList(test){
      //alert(test);
    var id = "product-" + test;
    console.log(test)

        $('#nav')
        .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span id="'+ id +'"></span></a></li>');
        $("#"+id).text(test);
    }


$().ready(function() {
    createList( "a");    
    createList( "b");   
    createList( "c");   
});