Как найти ближайший родственный в 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

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>

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>