獲取子元素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

雖然你可以用它來獲取子元素的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 2

只要你想得到H3元素的ID，並打印出來在MYVAR Check this link

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

Answer 3

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()最好是在你的情況： - https://stackoverflow.com/a/648014/4248328

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，而不是當前的。