将孩子的属性应用到父母

Posted 2023-05-09

【中文标题】将孩子的属性应用到父母

【英文标题】：Apply attribute of child to parent

【发布时间】：2020-10-05 08:03:12

【问题描述】：

我是 JS/jQuery 的新手，因此感谢任何帮助！：

对于每个具有 property 属性的锚点，我需要获取其子 img 的 src 并将该值应用为父锚点的 href

例如：

<a property="1">
    <img src="abc.jpg">
</a>

<a property="2">
    <img src="def.jpg">
</a>

<a property="3">
    <img src="ghi.jpg">
</a>

会变成：

<a href="abc.jpg" property="1">
    <img src="abc.jpg">
</a>

<a href="def.jpg" property="2">
    <img src="def.jpg">
</a>

<a href="ghi.jpg" property="1">
    <img src="ghi.jpg">
</a>

谢谢！

【问题讨论】：

您可能想使用data-property=" ... " 而不是property=" ... "，这样您就可以遵守html 标准，只需将前缀“data-”添加到您的所有自定义 属性

【参考方案1】：

您可以执行以下代码 尽可能短。

$('a>img').each(function()
    $(this).parent().attr('href',$(this).attr('src'))
);

这将在锚点下的每个图像上循环并将其 src 值分配为其父锚点的 href 值

【参考方案2】：

document.querySelectorAll(img).forEach(el => 
  el.parentNode.setAttribute('href', el.getAttribute('src'))

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

虽然此代码可以解决 OP 的问题，但最好包含有关您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。高质量、完整的答案强化了这一想法，并且更有可能获得支持。这些功能，加上所有帖子都是独立的要求，是 SO 作为一个使我们与论坛区分开来的平台的一些优势。您可以编辑以添加其他信息和/或使用源文档补充您的解释。

【参考方案3】：

你可以这样做：

$("a").each(function() 
  let href = $(this).find("img").attr("src");
  $(this).attr("href", href);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a property="1">
    <img src="abc.jpg">
</a>

<a property="2">
    <img src="def.jpg">
</a>

<a property="3">
    <img src="ghi.jpg">
</a>

【参考方案4】：

这应该可以完成工作，仅将 href 添加到具有属性的标签

  $("a").each(function (index, value) 
    if ($(this).attr("property")) 
      console.log($(this).children().attr("src"));
      $(this).attr("href", $(this).children().attr("src"));
    
  );