如何选择一些元素并在它们之后附加一个 div？

Question

在过去的几个小时里，我一直在头疼。情况如下：

我的网站有很多 div，但其中许多共享类（它们是平等的）但有一些不同的文本。示例：

<div class="summary-title">
                <a href="/xaxaxaxa" class="summary-title-link">I Am That Girl</a></div>

<div class="summary-title">
                <a href="/whatverl" class="summary-title-link">I Am That Girl</a></div>  

我想要做的是选择这些 div 中的每一个，并在另一个 div 悬停时添加一个跨度。

我的意思是，这就是我想要做的：悬停在 sumary-title div 之前的 div，在 sumary-title div 内部或外部附加一个带有类的跨度，无论是否有效。

这就是我目前得到的：

  $('summary-title').each(function(index) { 
    var content = $(index).next().text();
    $(index).append("<span class='hover-text'>"+content+"</span>");
  });

但是我得到一个 $ 没有定义的错误，可能是因为它是一个闭包？
我不知道该怎么做。代码看起来也很糟糕——我需要快速完成，但我做不到。有人能帮我至少知道该怎么做吗？

谢谢

Answer 1

append() 已经是一个隐式迭代（循环遍历 jQuery 集合中的元素集。）并且没有必要调用 .each() 。

$('.summary-title').append(function() {
  return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});

Answer 2

除了确保您的页面上有 jQuery 并正确引用它之外，您的代码应该如下所示：

$('.summary-title').each(function() { 
    var content = $(this).children('a:first').text();
    $(this).append("<span class='hover-text'>"+content+"</span>");
});

注意：

1. 类选择器中的点 - $('.summary-title')
2. this 而不是索引 - $(this)
3. children 选择器而不是 next

查看演示 - Fiddle。

要将其附加到悬停时使用的前一个元素：

$(document).ready( function() {
    $('.summary-title').hover( function() {
        var content = $(this).children('a:first').text();
        $(this).prev().append("<span class='hover-text'>"+content+"</span>");
    });
});