Question

所以我的页面上有这个HTML：

<div class='item'>
    <h2><a href='http://www.mysite.com/1'>Link 1</a></h2>
    <p class='desc'>Text text text text</p>
</div>

<div class='item'>
    <h2><a href='http://www.mysite.com/2'>Link 2</a></h2>
    <p class='desc'>Text text text text</p>
</div>

<div class='item'>
    <h2><a href='http://www.mysite.com/3'>Link 3</a></h2>
    <p class='desc'>Text text text text</p>
</div>

我想使用兄弟h2标签中的链接在段落末尾添加一个链接。我有这个jQuery：

$('p.desc').append(' <a href="' + $(this).prev().find('a').attr('href') + '">More ></a>');

但链接只设置为undefined。我在这里做错了什么？

Answer 1

为了能够获得相对于每个元素的值，然后创建一个锚标记，您不能像操作那样简单地链接操作。需要进行某种迭代，以便您可以调整每个特定段落的范围并获得相对链接。大多数情况下，你可以使用each，但append碰巧支持一个函数作为参数，然后需要返回你将添加到每个元素的内容。在此上下文中，您可以解析h2的链接并返回新锚点。

$('p.desc').append(function() { // loop through all p.desc and add something
    // within this function, $(this) is now the current p.desc
    var link = $(this).prev('h2').find('a').attr('href'); // get the path
    return $('<a/>').attr('href', link).text('More'); // return the new link
});

你显然不会费心去创建link变量，我只是讨厌长行代码，并且这样认为弄清楚发生的事情要容易得多。

Answer 2

$('.desc').append(function(
    return $(this).prev('h2').find('a').clone().text('More >');
});

Answer 3

问题是你使用$(this)，它没有以你想要的方式应用范围，因为你将它作为参数传递给append方法，基本上将你的范围嵌套在没有锚标记的地方 - 因此你得到了不确定的“未定义”结果。通过使用“each”，您可以使用当前使用的代码正确分配范围，只需将其包装在匿名函数中，如下所示：

$('p.desc').each(function(){
    // Your code here
});

使用jQuery从兄弟中添加内容

3 个答案: