将文章中的每个图像都用“;href"父链接标题的

Wrap every image in a article with the "href" of parent link title

本文关键字：href quot 标题 链接 文章 图像      更新时间：2023-09-26

我有这个代码：

<ul>
  <li>
    <h3><a class="title" href="page1.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageOne.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <li>
    <h3><a class="title" href="page2.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageTwo.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <!-- [...] -->
</ul>

我想在JS/jQuery中做的是：用a.title的相同href属性的链接包装所有图像。

我在jQuery中编码了这样的东西，但得到的结果只是第一个a.title:的href

$("ul li ul li img").each(function() {
  $(this).wrap("<a href='" + $("ul li a.title").attr("href") + "'> </a>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <h3><a class="title" href="page1.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageOne.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <li>
    <h3><a class="title" href="page2.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageTwo.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <!-- [...] -->
</ul>

这应该有效（如果您修复了HTML†）。

$("ul li ul li img").each(function(){
    $(this).wrap("<a href='"+ $(this).closest("li:has(h3)").find('a.title').attr("href") + "'> </a>");
});

（也可以使用li:has(a.title)而不是li:has(h3)…）

如果你的标记是这样固定的，你也可以用检索值

$(this).parents('li').find('a.title').attr('href')

†：

  • a元素需要一个结束标记
  • 第二个a元素需要title类

当您在jQuery中使用attr或prop访问属性或属性时，它只会给您选择器结果中第一个元素的值。在您的情况下，选择器会抓取页面上的所有"ul-lia.title"，因此抓取的属性仅来自第一个。

您想要的是最接近的"ul-lia.title"，为了实现这一点，您可以使用"最接近"的jQuery函数：

$("ul li ul li img").each(function(){
    var closestHref = $(this).closest('a.title').attr('href');
    $(this).wrap("<a href='"+ closestHref + "'> </a>");
});

编辑：根据Felix下面的评论，.closest（）只搜索祖先。请看他的答案，找出正确的选择。

<h3><a href="page.html">Post Title</h3>

你忘记关闭锚标签

应该是

<h3><a href="page.html">Post Title</a></h3>

看这里，它有效http://jsfiddle.net/xu6MX/

$("ul li").each(function(){
    $("ul li img",this).wrap("<a href='"+ $("h3 a.title",this).attr("href") + "'> </a>");
});

我更新了HTML（我刚刚在第一级添加了类"article"并关闭了标记"a"）

<ul>
<li class="article">
    <h3><a class="title" href="page1.html">Post Title 1</a></h3>
    <ul>
        <li>
            <img src="image.png" alt=""/>
            <p>Some text 1</p>
        </li>
    </ul>
</li>
<li class="article">
    <h3><a class="title" href="page2.html">Post Title 2</a></h3>
    <ul>
        <li>
            <img src="image.png" alt=""/>
            <p>Some text 2</p>
        </li>
    </ul>
</li>

这里是JS

$(document).ready(function() {
    $(".article").each(function(){
        var img = $(this).find('img');
        var title = $(this).find('.title');
        img.wrap("<a href='"+ title.attr("href") + "'></a>");
    });
});

注意：对于这种东西，不要忘记说明"文档就绪"

相关文章：