如何使用 jQuery 将属性值复制到兄弟属性

Question

我有一个ul 列表元素，其中在每个li 元素中都有一个div，里面有两个子div's，我希望它是第二个div > a 元素与hover_icon_link 类有与第一个 div > a 元素具有相同的href attr，我的代码仅适用于第一个 li 元素，其余的在每个 li 的任何地方都采用相同的 attr，我的代码如下 jQuery:

$('li.product-category').each(function(){ 
    var attrLink = jQuery('div.post_featured > a').attr("href");
    $('div.post_thumb > a.hover_icon_link').attr("href", attrLink);
});

HTML：

    <ul class="products">
        <li class="product-category">
            <div class="post_item_wrap">
                <div class="post_featured">
                    <a href="#link1">Title here</a>
                </div>
                <div class="post_thumb">
                    <a href="#link2" class="hover_icon_link">title here</a>
                </div>
            </div>
        </li>
    </ul>

Answer 1

我解决了我的问题，代码如下：

$('li.product-category').each(function(){ 
      var attrLink =  $(this).children("a").attr("href");
      $(this).find("a.hover_icon_link").attr("href", attrLink);
    });

Answer 2

虽然您已经自我回答了您的问题，这表明您已经自己解决了问题，但我想我会提供另一个答案来显示替代方案，同时解释您面临的原始问题和解决办法。

首先，您遇到的问题是代码中的问题：

// you select each <li> element with the class of '.product-category',
// and use the each() method to iterate over that collection:
$('li.product-category').each(function(){ 

    // here you select all elements that match the selector, meaning
    // you retrieve <a> every element on the page which is a child
    // of a <div class="post_featured"> element and retrieve the
    // 'href' attribute-value with the attr() method. When you use
    // a jQuery getter method on a collection the value returned is
    // the attribute-value of the first element in that collection
    // (of every element on the page that matches) not necessarily
    // the attribute-value of the intended <a>:
    var attrLink = jQuery('div.post_featured > a').attr("href");

    // here you select every <a class="hover_icon_link"> element in 
    // the document that is a child of a <div class="post_thumb">
    // element, and use the attr() method as a setter to update the
    // href attribute of every element in the document to the value
    // retrieved earlier:
    $('div.post_thumb > a.hover_icon_link').attr("href", attrLink);
});

// here we select all elements with the class of 'post_item_wrap'
// and iterate over them using the each() method:
$('.post_item_wrap').each(function() {

  // here we search within the current .post_item_wrap element,
  // represented by $(this), and within the current element we
  // use the find() method to find an <a> element which is a
  // descendant of an element with the class of 'post_featured',
  // and retrieve that href attribute-value:
  let href = $(this).find('.post_featured a').attr('href');

  // we again search within the current .post_item_wrap element
  // to find an <a> element which is a descendant of an element
  // with a class of 'post_thumb', and then update its href
  // attribute-value with the value find previously:
  $(this).find('.post_thumb a').attr('href', href);
});

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style-type: none;
}

li {
  border: 2px solid rebeccapurple;
  border-radius: 0.5em;
  overflow: hidden;
  margin: 0.5em auto;
}

div.post_featured {
  background-color: lightblue;
  margin: 0.3em 0;
}

div.post_thumb {
  background-color: palegreen;
}

a {
  display: flex;
  justify-content: space-around;
  align-content: center;
  width: 40vh;
}

a::after {
  display: content;
  content: '(' attr(href) ')';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products">
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link1">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link2" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link3">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link4" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link5">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link6" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
</ul>

JS Fiddle demo.

当然，这可以通过解构来改善，例如：

// here we select all elements with the class of 'post_item_wrap',
// and then iterate over each of those elements using the each()
// method:
$('.post_item_wrap').each(function(index, element) {
  // here we take advantage of the 'element', made available via jQuery's
  // anonymous function, and use Element.querySelectorAll() to retrieve both
  // <a> elements within the current .post_item_wrap element; we use
  // JavaScript's destructuring to assign those <a> elements to the variables
  // 'a' and 'b' (these are assigned in the order in which the <a> elements
  // are placed in the DOM):
  let [a, b] = element.querySelectorAll('a');

  // here we use Element.setAttribute() to update the attribute-value of the
  // 'href' attribute of the second <a> to be equal to the attribute-value
  // of the 'href' of the first <a> element:
  b.setAttribute('href', a.getAttribute('href'));
  // We could instead use:
  // b.href = a.href;
  // but that will use an absolute URL which may not be what you want:
});

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style-type: none;
}

li {
  border: 2px solid rebeccapurple;
  border-radius: 0.5em;
  overflow: hidden;
  margin: 0.5em auto;
  width: 15em;
}

div.post_featured {
  background-color: lightblue;
  margin: 0.3em 0;
}

div.post_thumb {
  background-color: palegreen;
}

a {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

a::after {
  display: content;
  content: '(' attr(href) ')';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products">
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link1">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link2" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link3">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link4" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link5">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link6" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
</ul>

JS Fiddle demo.

当然，因为也可以在纯 JavaScript 中迭代元素节点的 NodeList，所以没有什么能阻止我们用纯 JavaScript 编写以前的方法，给出：

// here we use document.querySelectorAll() to retrieve all elements in the
// document that match the selector '.post_item_wrap', and then chain that
// with NodeList.prototype.forEach() to iterate over that NodeList:
document.querySelectorAll('.post_item_wrap').forEach(
  // using an Arrow function (since we have no need of 'this', and have
  // a reference to the current Node of the NodeList, which we pass into
  // the function:
  (element) => {
    // as above, we use Element.querySelectorAll() to retrieve all <a>
    // elements found within the current element-node, and use
    // destructuring to assign the first two of those <a> elements to
    // the variables 'a' and 'b':
    let [a, b] = element.querySelectorAll('a');

    // exactly as above:
    b.setAttribute('href', a.getAttribute('href'));
  });

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style-type: none;
}

li {
  border: 2px solid rebeccapurple;
  border-radius: 0.5em;
  overflow: hidden;
  margin: 0.5em auto;
  width: 15em;
}

div.post_featured {
  background-color: lightblue;
  margin: 0.3em 0;
}

div.post_thumb {
  background-color: palegreen;
}

a {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

a::after {
  display: content;
  content: '(' attr(href) ')';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products">
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link1">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link2" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link3">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link4" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
  <li class="product-category">
    <div class="post_item_wrap">
      <div class="post_featured">
        <a href="#link5">Title here</a>
      </div>
      <div class="post_thumb">
        <a href="#link6" class="hover_icon_link">title here</a>
      </div>
    </div>
  </li>
</ul>

JS Fiddle demo.

参考资料：

• JavaScript：
  • Arrow functions。
  • Destructuring assignment。
  • document.querySelectorAll()。
  • Element.setAttribute()。
  • Element.getAttribute()。
  • NodeList.prototype.forEach()。
• jQuery:
  • each()。
  • find()。