Wie erhält man am einfachsten die ID eines untergeordneten Elements?

Question

Ich habe eine Up-Vote-Taste, die ein Child-Element mit einer dynamischen ID hat. Wie kann ich die ID dieses untergeordneten Elements abrufen?

Ich versuche eine Abstimmungsfeature zu einer Blogseite hinzuzufügen, und jeder Blog hat eine eindeutige ID, die ich für den Ajax-Aufruf brauche, um die Abstimmung in der Datenbank zu protokollieren und auch die Abstimmungsstatistik im HTML zu aktualisieren.

$(".plus").click(function() { 
 
    var myvar = $(".plus").find("h4"); 
 
    console.log(myvar); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='plus'> 
 
    <h4>up</h4> 
 
    <h3 id='{{blog.id}}'>0</h3> 
 
</button>

Answer 1

Obwohl Sie diese verwenden, das Kind Element id zu erhalten:

$(".plus").click(function() { 
    var myvar = $(this).find("h3")[0].id; 
    console.log(myvar); 
}); 

Doch ich das Gefühl, dass, wenn Sie Ihren Markup ändern, um ein wenig, das auch mit einigen data-* Attributen möglich sein kann:

$('.plus').click(function(){ 
 
    // jquery version 
 
    var blogId = $(this).data('blogId'); 
 
    console.log("jq .data() version::::", blogId); 
 
    
 
    // js version 
 
    var blgId = this.dataset.blogId; 
 
    console.log("js .dataset version::::", blgId); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='plus' data-blog-id='{{blog.id}}'> 
 
    <h4>up</h4> 
 
    <h3 id='{{blog.id}}'>0</h3> 
 
</button>

Answer 2

bereitgestellt wollen Sie die ID des h3 Element erhalten und es in myvar Check this link

$(".plus").click(function(){ 
    var myvar = $(".plus").find("h3").attr("id"); 
    console.log(myvar); 
}); 

Answer 3

jQuery .children() wird die beste Option ausdrucken: -

$(".plus").click(function(){ 
 
    var myvar = $(".plus").children("h3").attr('id'); 
 
    console.log(myvar); 
 
    var myvar1 = $(".plus").children("h4").attr('id'); 
 
    console.log(myvar1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='plus'> 
 
    <h4 id="h4_id">up</h4> 
 
    <h3 id='h3_id'>0</h3> 
 
</button>

Warum ist .children() am besten in Ihrem Fall: - https://stackoverflow.com/a/648014/4248328

Answer 4

Sie es wie folgt verwenden können.

$(".plus").click(function() { 
var myvar = $(this).find("h3").attr("id"); 
alert(myvar); 
}); 

Answer 5

Wenn Sie mehrere .plus Artikel und wollen haben die id eines jeden auf Klick erhalten, können Sie den this Kontext verwenden.

$(".plus").click(function() { 
 
    var myvar = $(this).find("h4").text(); 
 
    var myid = $(this).find("h3").attr("id"); 
 
    console.log(myvar, myid); 
 
});

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

 
<button class='plus'> 
 
    <h4>up</h4> 
 
    <h3 id='id_1'>0</h3> 
 
</button> 
 

 
<button class='plus'> 
 
    <h4>down</h4> 
 
    <h3 id='id_2'>0</h3> 
 
</button> 
 

Mit diesem Code, wenn Sie eine .plus Schaltfläche klicken, wird es selbst sucht den Wert des <h4> Schnipsel und die ID des <h3>.

einen $(".plus") Selektor statt this in der Klick-Funktion werden alle Tasten in der Seite auswählen, wenn Sie einen Klick, und die attr() Methode wird nur die erste ID statt der aktuellen zurückzukehren.