如何使用jQuery将属性值复制到同级属性

编程问答 2022-06-03

问题描述

我有一个ul列表元素，其中每个li元素中都有一个div，里面有2个孩子div's，我希望它是第二个div > a元素在类hover_icon_link与第一个href attr元素具有相同的div > a的情况下，我的代码仅在第一个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>

解决方法

我解决了我的问题，这是代码：

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

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

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

// 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:
});
*,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'));
  });
*,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。

参考：

attrchildrenhrefhyperlink

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...