Wählen Sie dynamisch hinzugefügt Li in Jquery

Question

Ich bin li in einem Ul dynamisch mit einem rel-Attribut anhängen. Jetzt muss ich das letzte li und seine Attribute auswählen. Es ist jedoch nicht möglich, das dynamisch hinzugefügte li auszuwählen.

var lastRel = $("#ulid li:last").attr("rel"); 


$("#addLi").on('click', function(){ 
$("ul").append('<li rel="5">5</li>'); 
}); 


$("#getLast").on('click', function(){ 
alert(lastRel); 
}); 

prüfen diese Fiddle ..

FIDDLE

Answer 1

Sie müssen den Code setzen, wo Sie die letzte Referenz von li in der Schaltfläche klicken, erhalten:

$("#getLast").on('click', function(){ 
    var lastRel = $("#ulid li:last").attr("rel"); 
    alert(lastRel); 
}); 

Dies liegt daran, Wenn Sie Ihre Variable ursprünglich gesetzt haben, ist es beim Laden der Seite, wenn es nur 4 li gibt.

Sie müssen die Variable erneut einstellen, wenn Sie die letzte li aktualisiert haben.

$("#addLi").on('click', function(){ 
 
    $("ul").append('<li rel="5">5</li>'); 
 
}); 
 

 

 
$("#getLast").on('click', function(){ 
 
    var lastRel = $("#ulid li:last").attr("rel"); 
 
    alert(lastRel); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="ulid"> 
 
    <li rel="1">1</li> 
 
    <li rel="2">2</li> 
 
    <li rel="3">3</li> 
 
    <li rel="4">4</li> 
 
</ul> 
 

 
<input type="button" id="addLi" name="addLi" value="Add Li"> 
 

 
<input type="button" id="getLast" name="getLast" value="Read Last LI">

Answer 2

Sie benötigen lastRel nach dem Hinzufügen eines neuen <li>

$("#addLi").on('click', function(){ 
    $("ul").append('<li rel="5">5</li>'); 
    lastRel = $("#ulid li:last").attr("rel"); 
}); 

$("#getLast").on('click', function(){ 
    alert(lastRel); 
}); 

FIDDLE

Answer 3

Alles, was Sie wurde richtig gemacht bearbeiten Sie diesen Code verlegt haben

var lastRel = $("#ulid li:last").attr("rel"); 

Dieser Code sollte in Ihrem Klickereignis enthalten sein.

Aber ich schlage vor, Sie dynamisch für die Li auch Id zu haben. Sie können also direkt auf den Selektor zugreifen.

Beispiel:

<li id="name-1"></li> 
<li id="name-2"></li> 

Also in meinem jQuery kann ich so etwas wie dieses

$("#name-"+id).val();