获取子元素ID最简单的方法是什么？

问题描述：

我有一个带有动态ID的子元素的投票按钮。我如何获取该子元素的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>

最好制作片段，以便人们可以复制您的示例并返回活动片段。 –

答

虽然你可以用它来获取子元素的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>

答

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

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

答

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

答

，你可以使用它像这样。

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

答

如果您有多个.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最简单的方法是什么？

相关推荐