1
votes

Comment accéder à l'enfant du parent dans jQuery

Essayer d'obtenir l'enfant d'un parent via un accesseur enfant. Essentiellement, essayez d'obtenir le .block__id via la classe add__block .

HTML

$(".add__block").click(function(){
    $(this).parent().find(function(){
          var id = $(".block__id").text();
    });
    console.log(id);
});

jQuery

<div class="col-12">
    <span class="block__id">{{$block->id}}</span>
          {{$block->title}}
     <span class="add__block">+</span>
</div>

Actuellement, mon identifiant n'est pas défini.

javascript jquery html

1 commentaires

@pravid c'est déjà dans la question ...?

6 Réponses :

0
votes

Pouvez-vous essayer comme ci-dessous:

$(".add__block").click(function(){        
    var id = $(".block__id").text();
    console.log(id);
});

1 commentaires

Notez que cela sélectionne tous les éléments .block__id , pas seulement celui lié à l'élément .add__block cliqué.

1
votes

Je ne suis pas très familier avec jQuery, mais avec JavaScript vanille c'est très simple:

<div class="col-12">
    <span class="block__id">{{$block->id}}</span>
          {{$block->title}}
     <span class="add__block">+</span>
</div>

const blocks = document.querySelectorAll('.add__block');

for (const block of blocks) {
  block.addEventListener('click', (e) => {
    console.log(e.target.previousElementSibling.textContent)
  })
}

1 commentaires

C'est parfait .. merci, mais je dois accepter la version jquery.

2
votes

Votre logique est presque correcte, mais le problème est que vous fournissez une fonction à find () alors que vous devez simplement utiliser une chaîne de sélection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <span class="block__id">Block #1</span> 
  Block title
  <span class="add__block">+</span>
</div>
<div class="col-12">
  <span class="block__id">Block #2</span> 
  Block title
  <span class="add__block">+</span>
</div>

$(".add__block").click(function() {
  var id = $(this).parent().find(".block__id").text();
  console.log(id);
});

0 commentaires

0
votes

En cliquant, vous pouvez trouver le parent de l'élément .add__block et trouver le .block__id approprié dans le parent comme suit,

$(".add__block").click(function(){
    console.log($(this).parent().find(".block__id").text(););
});

0 commentaires

0
votes

$('.add_block').prevAll('span')

0 commentaires

1
votes

Une autre alternative consiste simplement à rechercher le frère avec la méthode prev , ce qui peut être légèrement plus rapide que d'accéder au parent puis de rechercher à partir de là.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <span class="block__id">Block #1</span> 
  Block title
  <span class="add__block">+</span>
</div>
<div class="col-12">
  <span class="block__id">Block #2</span> 
  Block title
  <span class="add__block">+</span>
</div>

$('.add__block').click(function(){
    var id = $(this).prev('.block__id').text();
    console.log(id);
});

0 commentaires