如何在jQuery中找到最接近的同级元素

Question

我想学习jQuery，我有以下标记：

在一个 div 中，我有两个文本“date”和“description”，以及两个按钮“edit”和“delete”。

当我点击编辑按钮时，我想要获取该 div 的日期和描述

在这里，我尝试使用 parents() 选择器来获取它，如果不能使用当前的标记，请建议如何使用 closest() 选择器。

$(document).ready(function() {
  //If i click on edit button . I want to select the corresponding date and description .How can we do that?

  $(".taskTemplate .edit").on('click', function(event) {
    editTask(event.target);
  });
});

function editTask(node) {

  var date = $(node).parents('.taskTemplate').find('.date').html();
  alert(date);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

- Srisa

---

你尝试过 $(node).closest(".date").html() 吗？ - Sterling Archer

Answer 1

只需将代码中的parents()替换为closest()：

var date = $(node).closest('.taskTemplate').find('.date').html();

希望这可以帮助到您。

$(document).ready(function() {
  $(".taskTemplate .edit").on('click', function(event) {
      editTask(event.target);
  });
});

function editTask(node) {
  var closest_div = $(node).closest('.taskTemplate');
  
  var date = closest_div.find('.date').text();
  var description = closest_div.find('.desc').text();

  console.log(date, `|`, description);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

- Zakaria Acharki

---

@ZakariaAcharki 没有将 "downvote" 进行转换。请注意 OP 中的需求描述：“当我点击编辑按钮时，我想获取该 div 的日期和描述”。 - guest271314

Answer 2

当我点击编辑按钮时，我想获取该 div 的日期和描述。您可以使用 .siblings() 选择 .edit 元素的 .date、.desc 兄弟元素。

$(document).ready(function() {
  //If i click on edit button . I want to select the corresponding date and description .How can we do that?

  $(".taskTemplate .edit").on('click', function(event) {
    editTask($(this).siblings(".date, .desc"));
  });
});

function editTask(nodes) {
 var data = $.map(nodes, function(el) {
    return `${el.className}: ${el.textContent}`
  }).join(", ");

  alert(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

- guest271314