獲取子元素ID的最簡單方法是什么？

Question

我有一個上投票按鈕，其中有一個帶有動態ID的子元素。 如何獲取該子元素的ID？

我正在嘗試向博客網站添加投票功能，並且每個博客都有一個唯一的ID，我需要用它來進行ajax調用以將投票記錄到數據庫中，並更新html中的投票計數。

 $(".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

如果您要獲取h3元素的ID並在myvar中將其打印出來，請檢查此鏈接

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

Answer 2

jQuery .children()將是最佳選擇：-

 $(".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> 

為什么.children()最適合您的情況 ： .children() : //stackoverflow.com/a/648014/4248328

Answer 3

盡管您可以使用它來獲取子元素的ID：

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

但是我覺得，如果您稍微更改標記，使用data-*屬性也可以實現：

 $('.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 4

您可以像這樣使用它。

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

Answer 5

如果您有多個.plus項，並且想要在單擊時獲取每個項的id ，則可以使用this上下文。

 $(".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> 

使用此代碼，當您單擊.plus按鈕時，它將自動查找<h4>代碼段的值和<h3>的ID。

在單擊函數中使用$(".plus")選擇器代替this選擇器將在單擊一個按鈕時選擇頁面中的所有按鈕，而attr()方法將僅返回第一個ID，而不返回當前的ID。