Question

我有一个向上投票按钮，其中包含一个带动态ID的子元素。如何获取该子元素的id？

我正在尝试向博客网站添加投票功能，每个博客都有一个唯一的ID，我需要ajax调用来记录数据库中的投票，并更新html中的投票记录。 / p>

$(".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中打印出来 Check this link

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

Answer 2

jQuery .children() 将是最佳选择： -

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么.children()最适合您的情况 ： - https://stackoverflow.com/a/648014/4248328

Answer 3

虽然您可以使用它来获取子元素的id：

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

但是我觉得，如果你用一些data-*属性改变你的标记，那么这也是可能的：

＆＃13;

$('.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);
});

＆＃13;

<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>

＆＃13;

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的最简单方法是什么？

5 个答案: