查找 parent div ID，然后查找 div 的 child 的所有数据

Question

我正在尝试做一些事情，我点击 div 的标题，然后弹出一个包含 div 信息的模式。 div 附加在 jquery 中。所以现在我想当我点击 link 它给我 parent Div 和 class forumItem 的 ID，然后 returns 我确定该 forumItem 中 div 的信息。我试过最接近的方法，但这总是 returns undefined

追加div

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal()"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

我试过像这样获取 parent div 的 ID，但是这个 returns 未定义

function loadModal(){
    var divid = $(this).closest(".forumItem").attr("id");
    console.log(divid);
}

Answer 1

您需要将当前点击的元素作为参数传递：

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal(this)"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

然后，将传入的参数作为绑定对象：

function loadModal(clicked){
    var divid = $(clicked).closest(".forumItem").attr("id");
    console.log(divid);
}

在函数内部的代码 $(this) 中，指向函数对象本身而不是单击的元素。

最好的方法是添加一个事件委托，监听每个单击的按钮，而不用 JavaScript 事件污染 dom。首先从创建的元素中删除 onclick：

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

然后创建事件委托侦听器，挂接到主容器 (.mainForm):

$('.mainForum').on('click', '.titleButton', function() {
    var divid = $(this).closest(".forumItem").attr("id");
    console.log(divid);
});

$(".mainForum").append('<div class="forumItem" id="test"><button class="titleButton"> click me</button></div>');

$('.mainForum').on('click', '.titleButton', function() {
  var divid = $(this).closest(".forumItem").attr("id");
  console.log(divid);
});

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

</div>

希望对您有所帮助。

查找 parent div ID，然后查找 div 的 child 的所有数据

Finding parent div ID then all data of that div's child

jquery

parent

children

closest