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，带有类的span将附加在sumary-title div之内或者在其之外，无论什么工作。

到目前为止我得到的是：

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

但是我得到一个错误，$未定义，可能是因为它是一个闭包？我不知道该怎么做。代码看起来也很糟糕 - 我需要快速完成这项工作而且我无法做到。有人会帮我至少知道该怎么做吗？

由于

Answer 1

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

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

注意：

类选择器中的点 - $('.summary-title')
this代替索引 - $(this)
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>");
    });
});

Answer 2

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

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

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

2 个答案: