web-dev-qa-db-fra.com

Comment trouver le frère le plus proche dans jQuery

J'essaie d'apprendre jQuery, j'ai un balisage suivant

Dans une div, j'ai deux textes date et description et deux boutons modifier et supprimer.

Lorsque je clique sur le bouton Modifier, je veux obtenir la date et la description de cette div

Ici, j'essaie de l'obtenir en utilisant le sélecteur parents(), comment puis-je utiliser le sélecteur closest() ici, si ce n'est pas possible avec le balisage actuel, veuillez suggérer comment puis-je procéder avec closest() sélecteur.

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

Veuillez aider

Merci

javascriptjquerydom-traversal
10
Srisa

Remplacez simplement parents() par closest() dans:

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

J'espère que cela t'aides.

$(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>
4
Zakaria Acharki

Lorsque je clique sur le bouton Modifier, je veux obtenir la date et la description de cette div

Vous pouvez utiliser .siblings() pour sélectionner .date, .desc frères et sœurs de .edit élément

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