Question

我有这段代码：

<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中做什么：用href属性为a.title的链接包装所有图像。

我在jQuery中编写了类似的内容，但结果只给出了href的{{1}}：

a.title

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

Answer 1

这应该有效（如果您修复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类。

Answer 2

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

你想要的是最接近的'ul li a.title'，为了实现这一点，你可以使用'最接近'的jQuery函数：

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

编辑：下面的Per Felix评论，.closest（）只搜索祖先。请参阅他对正确选择器的回答。

Answer 3

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

您忘记关闭锚标记

应该是

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

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

Answer 4

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

Answer 5

我更新了HTML（我刚刚在第一级添加了类“文章”并关闭了标记“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>");
    });
});

注意：对于这种东西，不要忘记“准备好文件”的说明

使用父链接标题的“href”包装文章中的每个图像

5 个答案: