标签: jquery-after

请看看:http://jsfiddle.net/s6VdW/

HTML:

<div id="test"></div>

JS:

var span1 = $("<span/>").text("Hello");
var br = $("<br/>");
var span2 = $("<span/>").text("World!");
span1.after(br).after(span2);

$("#test").append(span1);

预期结果是:

Hello
World

HTML的预期结果是:

<div>
    <span>Hello</span>
    <br/>
    <span>World</span>
</div>

错误是什么？根据jQuery Docs(http://api.jquery.com/after/),它应该是可能的:

.after() 也适用于断开连接的DOM节点.

和

即使在将其插入文档之前,也可以进一步操作该集合.

UPDATE

看来,在使用之前,我需要首先将第一个跨度附加到DOM .after().但是替代方案是什么？如果我无法访问DOM,例如因为我在DOM中没有意识到代码的一部分？http://jsfiddle.net/s6VdW/10/

更新2

我可以创建一个"临时"div,我将元素附加到其中.然后我归还那个div的孩子们.演示:http://jsfiddle.net/s6VdW/13/ - 这看起来像是要走的路吗？

什么是prototype.js相当于以下代码

jQuery('#txtId').after(divdata);

我试图通过找到列表的中间点并</ul><ul>在此之后添加将无序列表拆分为两列</li>.这可能是完全错误的方式,但这是我想的方式.我的js看起来像这样:

$('.container ul').each(function(){

    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':eq('+half+')').after('</ul><ul>');

});

我遇到的问题和我不明白的是.after()正在颠倒标签和输出的顺序:

<ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<ul></ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

</ul>

如果有更好的方法,请告诉我,但我真的想知道为什么.after()正在颠倒标签的顺序.谢谢

我试图将我的jQuery脚本转换为javascript.我有问题..

我有一个创建节点的脚本

var new_node = document.createElement("div");
      new_node.className="tooltip";
      new_node.innerHTML = html;
      alert(new_node.className);

当我这样做

jQuery(link).after(new_node);

它工作正常.但我想以javascript方式做到这一点.我试过使用appendChild函数,但它给出了一些奇怪的结果.

这个你能帮我吗.

所以我目前使用以下内容:

$.ajax({
    type: "GET",
    url: "file.php",
    success: function(html) {
        $("#tableRow").after(html);
    }
});

它巧妙地将新行(或行)添加到现有表中.file.php返回:

<tr><td>stuff</td></tr>

我可以一次添加一行.我正在尝试为新添加的行设置动画,例如:

$("#tableRow").after(html).animate({ backgroundColor: "#bce4b4" }, "fast")

但这突出了我之后添加新行的行.我不能让它适用于那个新行.我怎样才能做到这一点？

更新:

基于给出的答案,我将它们放在一起:http: //jsfiddle.net/jreljac/5ctpc/3/我在哪里执行以下操作:

$("<tr><td>2 1</td><td>2 2</td></tr>").insertAfter("#tableRow").animate({
    backgroundColor: "#bce4b4"
}, "slow");

(我替换了file.php将提供的文本")并且这似乎不起作用.它创建了行但没有动画.我错过了一些简单的东西吗？

我本来想要.fadeIn()制作一个链接到此的动画.after(),但这似乎不是这样做的方式.有什么建议？

$(clicked_item).parent().parent().parent().after(str).fadeIn("slow");

for (var i = 0; i < rows.length; i++) {   
      $('#rows').after('<tr>
                           <td>'+ i + 1 + '</td>'
                           <td>'+rows[i][\'title\']+'</td>
                           <td>'+rows[i][\'startTime\']+' 
                        </tr>'); 
}

在上面的jquery代码中,我想在我的html中使用"rows"类在div之后插入表行.但是,我收到了错误

Uncaught SyntaxError: Unexpected token ILLEGAL

我可以知道什么是错的,我该如何解决？谢谢

如果启用了CAPS锁定,我正在修改脚本以在密码字段上显示警告.

如果我使用该append()方法,我正在构建的元素被添加到页面中,但是它不是非常可扩展的,因为它依赖于具有相关父元素的密码字段.我想要做的是添加after()密码字段,但是当我这样做时显示为[object Object].

这是我到目前为止所拥有的:

$(document).ready(function(){
  $(":password").bind("keypress", function(e) {
    el = jQuery('<div/>', {
      id: 'caps_warning',
      text: 'CAPS lock is on'
    })

    kc = e.keyCode ? e.keyCode : e.which;
    sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);

    if(((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
      el.appendTo(e.currentTarget.parentElement);
    } else {
    }
  });
});

我想替换el.appendTo(e.currentTarget.parentElement);用e.currentTarget.after(el);.