如何獲取任何父div單擊哪個子div的id值

Question

假設我有一個父div ，其中包含另外兩個div，這些div是使用jQuery動態創建的。 當我單擊一個div時，如果我單擊第二個div，它將提示或控制其id值，然后它將顯示第二個div id的屬性值

 for (i=0; i < 3; i++){ content = "<div class='dataToAppend' id="+i+" style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id='+i+' src='+i+' >' content += "</div>" $(".data").append(content) } 

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

在此代碼段中，當我單擊一個圖像時，我希望它控制其id屬性

Answer 1

您可以將委派的click事件綁定到圖像：

 for (i = 0; i < 3; i++) { content = "<div class='dataToAppend' id='div" + i + "' style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id=' + i + ' src=' + i + ' >' content += "</div>" $(".data").append(content) } $(".data").on('click', 'img', function() { // use a delegated event on the image console.log(this.id); // this is the image id console.log($(this).parent().attr('id')); // this is the div id }); 

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

請注意，這些ID應該是唯一的，並且您當前正在創建的div和圖片ID相同（我在上面進行了編輯，因此它們是不同的）

Answer 2

在冒泡階段在.test元素上捕獲click事件，檢查事件目標，如果它是div則獲取id ，如果是圖像，則獲取id ，獲取其parentNode的id 。

您可以將vanillaJS用於此任務

document.querySelector('.test').addEventListener('click', function(ev) {
  let tgt = ev.target;
  if (tgt.matches('div')) {
    console.log(tgt.id);
  }
  if (tgt.matches('img')) {
    console.log(tgt.parentNode.id);
  }
});

（請注意，您的ID不能以數字開頭）

Answer 3

使用香草JavaScript，您可以僅在for循環之后查詢所有三個.dataToAppend div，並使用forEach（）方法返回每個元素的ID。

---

檢查並運行以下代碼片段 ，以獲得上述內容的實際示例：

 var data = document.querySelector(".data"); for (i=0; i < 3; i++){ content = "<div class='dataToAppend' id=imgDiv"+i+" style='cursor:pointer; margin:30px; display:inline-block;'>"; content += '<img id='+i+' src=img'+i+' >'; content += "</div>"; data.innerHTML += content; } var dataDivs = document.querySelectorAll(".dataToAppend"); dataDivs.forEach(div => { div.addEventListener("click", () => console.log(div.id)); }); 

 <div class="data"></div> 

---

注意：在上面的示例中，我添加了一個非數字字符，以便在CSS中更輕松地定位元素。

Answer 4

您可以使用：

$(document).on('click', '.dataToAppend img', function() {}

為了與類專區內點擊事件添加到您的所有imgaes .dataToAppend 。

接下來，您可以使用$(this).attr('id'); 獲取您單擊的圖像的id 。

另外，我建議您在for循環中建立一個名為content的字符串（因為.append()是一種運行起來比較昂貴的方法），只有完成后，您才將.append() content到DOM中。 這樣，您僅一次添加到DOM，而不是多次添加。

請參見下面的工作示例：

 let content = ""; for (i = 0; i < 3; i++) { content += "<div class='dataToAppend' id=" + i + " style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id=' + i + ' src=' + i + ' >' content += "</div>" } $(".data").append(content); $(document).on('click', '.dataToAppend img', function() { let id = $(this).attr("id"); console.log(id); }); 

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