查找父 div ID，然后查找该 div 子项的所有数据答案

【问题标题】：Finding parent div ID then all data of that div's child查找父 div ID，然后查找该 div 子项的所有数据
【发布时间】：2018-06-22 13:04:59
【问题描述】：

我正在尝试做一些事情，我点击一个 div 的标题，然后弹出一个包含该 div 信息的模式。 div 附加在 jquery 中。所以现在我想当我点击链接时它给我父Div的ID和类forumItem，然后返回我该forumItem中div的某些信息。我尝试了最接近的方法，但这总是返回 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>');

我尝试过像这样获取父 div 的 id，但这会返回 undefined

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

【问题讨论】：

标签： jquery parent children closest

【解决方案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>

希望对你有帮助。

【讨论】：