J'essaie de parcourir divs en prenant le href d'un div et en le déplaçant vers le href d'un autre div, puis je répète cette opération pour tous les divs suivants.

Je le fais fonctionner dans la mesure où il le fait pour la première division, mais il place ensuite ce lien href dans tous les autres.

Voir https://jsfiddle.net/grmaw27y/5/

html:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="image">
        <a href="#" class="">
          <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
        </a>
      </div>
    </div>
    <div class="col-md-8">
      <h2>Google</h2>
      <div class="entry">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
        <p><a href="https://www.google.ie/">https://www.google.ie/</a></p>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="image">
        <a href="">
          <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
        </a>
      </div>
    </div>
    <div class="col-md-8">
      <h2>Yahoo</h2>
      <div class="entry">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p><a href="https://ie.yahoo.com/">https://ie.yahoo.com/</a></p>
      </div>
    </div>
  </div>
</div>

js:

$('.entry').each(function() {
  var href = $('.entry p a').attr('href');
  $('.image a').attr('href', href);
});
0
Bosc 8 août 2016 à 22:49

3 réponses

Meilleure réponse

Essaye ça:

$('.entry').each(function(i,element) {
  var href = $(element).find('p a').attr('href');
  $(element).parent().prev().find('.image a').attr('href', href);
});

Exemple de travail: https://jsfiddle.net/grmaw27y/6/

Alors, quel était le problème avec votre code?

Votre expression pour trouver le href var href = $('.entry p a').attr('href'); et affecter le href $('.image a').attr('href', href);, travaillait sur les sélecteurs de classe. qui retourne un tableau de toutes les correspondances. À chaque passage, ils correspondaient aux deux mêmes éléments. Pour résoudre ce problème, nous utilisons l'objet element en boucle, vous spécifiez exactement ce que vous voulez lire et écrire.

1
Shaunak 8 août 2016 à 20:03

Vous devez utiliser les fonctions de traversée pour sélectionner des éléments par rapport à chaque cible:

$('.entry').each(function() {
  var href = $('p a', this).attr('href');
  $(this).closest('.row').find('.image a').attr('href', href);
});

https://jsfiddle.net/gbc22h0f/

0
Jason P 8 août 2016 à 19:53

Vous pouvez parcourir le container et trouver les éléments pertinents À L'INTÉRIEUR de chacun des conteneurs:

$('.container').each(function() {
  var href = $(this).find('div.entry a').attr('href');
  $(this).find('div.image a').attr('href', href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="image">
        <a href="#" class="">
          <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
        </a>
      </div>
    </div>
    <div class="col-md-8">
      <h2>Google</h2>
      <div class="entry">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
        <p><a href="https://www.google.ie/">https://www.google.ie/</a></p>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="image">
        <a href="">
          <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
        </a>
      </div>
    </div>
    <div class="col-md-8">
      <h2>Yahoo</h2>
      <div class="entry">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p><a href="https://ie.yahoo.com/">https://ie.yahoo.com/</a></p>
      </div>
    </div>
  </div>
</div>
0
Dekel 8 août 2016 à 19:55