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

Question

我努力学习jQuery，我有以下标记

在一个div，我有两个文本日期和说明和两个按钮编辑和删除。

当我点击编辑按钮，我想该div

在这里，我试图把它用parents()选择，我怎么能在这里使用closest()选择，日期和说明，如果它是不可能的与目前的标记，请建议如何进行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>

请帮

感谢

Answer 1

只需通过closest()在更换parents()：

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>

Answer 2

当我点击编辑按钮，我想该div

可以使用.siblings()的日期和说明 选择.date，.desc兄弟姐妹.edit元素

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