通過div循環並將hrefs移動到另一個div

Question

我試圖循環通過divs從一個div取href並將其移動到另一個div的href，然後對所有後續div重複此操作。

我有它的工作，因爲它爲第一個div，但然後它將該href鏈接放在所有其他。

看到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

試試這個：

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

禾例如： https://jsfiddle.net/grmaw27y/6/

那麼你的代碼出了什麼問題？

你的表情找到了類選擇器，並找到了href var href = $('.entry p a').attr('href');和href $('.image a').attr('href', href);。它返回所有匹配的數組。在每一次傳遞中，他們都匹配相同的兩個元素。 爲了解決這個問題，我們在循環中使用element對象，您可以準確指定要讀取和寫入的內容。

Answer 2

您需要使用穿越功能來選擇相對於每個目標要素：

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

https://jsfiddle.net/gbc22h0f/

Answer 3

您可以循環在container，並發現裏面每個容器的相關要素：

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