Question

我是JavaScript新手。完整代码是here（无法在问题的正文中输入jQuery）。

以下是代码的JS部分

$(document).ready(function(){
    $("#btn1").click(function(){
        var newtext =  $("<b>It works!</b>");
        newtext.hide();
        $("p").append(newtext);
        newtext.fadeIn();
    });
});

我打算做的是，当用户点击按钮（“＃btn1”）时，一段新文本（“It works！”）应出现在每个的末尾HTML的> 元素。但是当我运行代码时，文本只会附加到最后一个 元素。也就是说，如果您从上面的链接打开源代码，您会看到有两个元素。但是“它有效！”文本仅附加到第二个文本。

如何将此文字追加到每个 元素的末尾？

Answer 1

它将文本附加到每个。但是，当您执行.fadeIn()时，您只会影响您追加的最后一个副本。尝试将其更改为

 $("p b").fadeIn();

请注意，此解决方案非常简单，如果您的HTML结构变得复杂，它可能会导致奇怪的效果。你可以用这样的东西更加精确：

$(document).ready(function() {
    var txtid = 1;
    $("#btn1").click(function(){
        var newtext =  $("<b>It works!</b>").addClass("txt-" + txtid);
        newtext.hide();
        $("p").append(newtext);
        $("p .txt-" + id).fadeIn().removeClass("txt-" + txtid);
        txtid += 1;
    });
});

为您插入的每个文本块添加一个类。每个按钮单击的类都不同，但同时插入的所有文本块共享。这样，您就可以确保.fadeIn()来电仅影响您刚刚插入的内容，而不会影响其他迷路代码。

Answer 2

尝试使用.each（），例如

$(document).ready(function(){
 $("#btn1").click(function(){
  $("p").each(function(index, elem){
    var newtext =  $("<b>It works!</b>");
        newtext.hide();
        $(elem).append(newtext);
        newtext.fadeIn();      
  });
 });
});

示例：http://jsfiddle.net/wadehuang36/utzum522/

Answer 3

正在将文字附加到每个，但最后你要说的是

 newtext.fadeIn();

所以这只是最后一个时代。而不是像吼叫一样。

 $("p").find('b').fadeIn();

DEMO

Answer 4

这有效

$(document).ready(function(){
  $("#btn1").click(function(){
    var newtext =  $("<b>It works!</b>");
    $(newtext).hide("fast", function() {
        $("p").append(newtext).fadeIn();
    });
  });
});

Answer 5

要将文字附加到每个p标记，只需删除此行newtext.hide();

以便您的脚本看起来像

 $("#btn1").click(function(){
    var newtext =  $("<b>It works!</b>");
    //newtext.hide();
    $("p").append(newtext);
    newtext.fadeIn();
  });

DEMO

jQuery append（）函数不附加每个<p>元素</p>

5 个答案: