loop durch divs und move hrefs zu einem anderen div

Question

Ich versuche, durch divs durchlaufen Sie die href von einem div und verschieben Sie es auf die href eines anderen div, und wiederholen Sie dies für alle folgenden divs.

Ich habe es funktioniert so weit wie es tut es für die erste div aber dann stellt es diese href Verbindung in allen anderen.

siehe 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); 
}); 

Answer 1

Try this:

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

Wo rking Beispiel: https://jsfiddle.net/grmaw27y/6/

Also, was war falsch mit Ihrem Code?

Ihr Ausdruck, um die href var href = $('.entry p a').attr('href'); zu finden und zuzuweisen href $('.image a').attr('href', href);, arbeiteten an Klassenselektoren. welche das Array aller Übereinstimmungen zurückgeben. In jedem Durchgang stimmten sie mit den gleichen zwei Elementen überein. Um dies zu beheben verwenden wir das Objekt element Objekt in Schleife, geben Sie genau, was Sie lesen und schreiben möchten.

Answer 2

Sie müssen Traversal-Funktionen verwenden Elemente relativ zu jedem Ziel auszuwählen:

https://jsfiddle.net/gbc22h0f/

Answer 3

Sie können Schleife über die container und die entsprechenden Elemente in jedem der Behälter finden:

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