Question

因此我和我的朋友正在尝试为网站制作用户脚本，但无法解决此问题。我们希望从网站的shoutbox添加一个脚本，并将其添加到右侧的名称，以便能够在那里找到名字的@人。

@ simple的脚本在这里，这已经在网站HTML中，我们只是试图移动它。

<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="Tattoo"></li>

我们目前的尝试是 -

function onLoad() {
    $( document ).ready(){
        var uname = $(this).data('data-at-uname');
        $( "a.online-name" ).add(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)
    }
}

但没有成功。整个页面的HTML可以在这里找到 - http://pastebin.com/J6kk6LSn

我们使用的插件是Greasemonkey，如果它有帮助，我们一直试图这样做几个小时无济于事。如果有人能提供帮助，将不胜感激。

Answer 1

你需要纠正两件事：
1.正确的语法data-at-uname阅读 - 见下面的代码
2.添加html节点 - 将html放在单引号中并使用.append()

使用以下代码：

$( document ).ready(function(){
var uname = $(this).data('at-uname');// read it like this
$( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
});

编辑：根据讨论，OP希望为<span class="online-name"内的每个锚点添加li，所以这里是代码：

 $(document).ready(function(){
    $( ".online-name a").each(function(){
        var uname = $(this).data('at-uname');
        // add li before anchor
        $(this).before('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');

       // add li after anchor
      $(this).after('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
    });
  });

Answer 2

document.ready()的语法错误。它应该是：

function onLoad() {
    $(document).ready(function() {
        var uname = $(this).data('data-at-uname');
        $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>')
    });
}

该函数是.ready()的参数。

您还错过了.add()的参数的引号参数。

Answer 3

尝试jQuery append()方法

function onLoad() {
    $( document ).ready(function(){
        var uname = $(this).data('at-uname');
        $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>')
    });
}

Answer 4

我认为没有必要在函数中准备好文档..你可以尝试这样：....

function onLoad() {
    var uname = $(this).data('at-uname');
    $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
}

但$(this) ??你必须得到一些选择器......

Answer 5

您可以使用jquery append将内容添加到节点的末尾，或使用prepend将其添加到节点的开头

$( document ).ready(){
    var uname = $(this).data('atUname');

    // use append instead of Add to add the content to the end of the node 
    $( "a.online-name" ).append(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)

    // or use prepend to add teh content to the bengining to the node
    $( "a.online-name" ).prepend(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)

    // or use html to replace the content 
    $( "a.online-name" ).html(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)
}

如何使用jQuery添加新的HTML节点

5 个答案: