使用jQuery从同级

追加内容，所以我有我的网页上这个网站：使用jQuery从同级

<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。我在这里做错了什么？

来源

2013-05-03 Steven

你不需要的“>”，以“更多”的权利。 – Swordfish0321 2013-05-03 21:45:40

@ Swordfish0321：不要以为这是不需要的，只是想成为'更多'的箭头，他应该做['>']（http://www.w3.org/TR/html4/charset.html ＃h-5.3.2）。 – 2013-05-03 23:09:18

@Paolo Bergantino是的，我在发表评论后发现，但我留下了后代，因为我认为还应该使用特殊的字符。 – Swordfish0321 2013-05-03 23:15:41

为了能够获取相对于每个元素的值，然后创建一个锚点标记，您不能简单地链接操作就像你有。需要做某种迭代，然后才能确定每个特定段落的范围并获得相关链接。大多数情况下，您可以使用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变量，我只是恨长的代码行，并认为这种方式是一个更容易辨认出这是怎么回事。

来源

2013-05-03 21:29:26

你应该在OP的例子（'$（'p.desc'）。append（）'）和你的（$'.each（）'）内解释'this'之间的区别。这应该澄清你需要独立处理每个段落的事实 – 2013-05-03 21:35:52

@JuanMendes：是的，当我回答时我实际上正在离开办公室，所以我没有详细说明。 – 2013-05-03 22:56:30

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

来源

2013-05-03 21:28:00 adeneo

+1，完全忘记了可以接受功能。 – 2013-05-03 22:58:19

问题是您使用的$(this)，它没有按照您的意图应用范围，因为您将它作为参数传递给append方法，实质上是将您的范围嵌套在没有定位标记的地方 - 因此您得到了不希望的结果“未定义”。通过使用“每个”你可以正确地分配与使用的是当前的代码范围，只需将它包装在一个匿名函数，像这样：

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

来源

2013-05-03 22:02:10 Swordfish0321

使用jQuery从同级

回答

相关问题