Question

我正在尝试遍历divs从一个div获取href并将其移至另一个div的href，然后对以下所有div重复此操作。

我有它的工作，因为它为第一个div做，但然后它将href链接放在所有其他div。

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>

循环通过div并将hrefs移动到另一个div

3 个答案: