如何在jQuery中找到最近的兄弟 [英] How to find the closest sibling in jQuery

问题描述

我正在学习 jQuery，我有以下标记

在一个 div 中，我有两个文本日期和描述以及两个编辑和删除按钮.

当我点击编辑按钮时，我想获得那个 div 的日期和描述

在这里，我试图使用 parents() 选择器来获取它，我如何在这里使用 closest() 选择器，如果当前标记无法使用，请建议我如何继续使用 closest() 选择器.

$(document).ready(function() {//如果我点击编辑按钮.我想选择相应的日期和描述.我们该怎么做?$(".taskTemplate .edit").on('click', function(event) {编辑任务(事件.目标)；});});功能编辑任务(节点){var date = $(node).parents('.taskTemplate').find('.date').html();警报(日期)；}

<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">任务描述</span><input type="button" class="edit" value="edit"><input type="button" class="delete" value="delete"><span class="done">done</span>

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

解决方案

只需将 parents() 替换为 closest() in :

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

希望这会有所帮助.

$(document).ready(function() {$(".taskTemplate .edit").on('click', function(event) {编辑任务(事件.目标)；});});功能编辑任务(节点){varclosest_div = $(node).closest('.taskTemplate');var date =closest_div.find('.date').text();var description =closest_div.find('.desc').text();控制台日志(日期，`|`，描述)；}

<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">任务描述</span><input type="button" class="edit" value="edit"><input type="button" class="delete" value="delete"><span class="done">done</span>

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

I am trying to learn jQuery, I have following mark up

In a div, I have two texts date and description and two buttons edit and delete.

When I click the edit button, I want to get the date and description of that div

Here I am trying to get it using parents() selector, how can I use closest() selector here , if it is not possible with the current markup please suggest how can I proceed with closest() selector.

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

解决方案

Just replace parents() by closest() in :

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

Hope this helps.

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

这篇关于如何在jQuery中找到最近的兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！