使用Jquery append时循环行为的奇怪Javascript

我可能错过了/做了一些愚蠢的事情，但我似乎无法解决这个问题：

这里有一把小提琴显示了问题：

请注意，您需要打开控制台来查看发生了什么

基本上，在这个示例中，我有两个包含for循环的函数，除了第二个包含JQuery追加外，它们彼此相同

该函数的目标是从字符串中获取html元素，这在第一个函数中效果很好，但在第二个函数中效果不好

从控制台中可以看到，这会导致忽略任何不是文本节点的内容，并且不会将其添加到列表中。在这种情况下，不包括b和p标签

下面是代码：

JS:

函数解析_文本（文本）{
var div=document.createElement（“div”）；
div.innerHTML=文本；
var元素=div.childNodes；
var container=jQuery（“容器”）；
var列表=[]；
对于（var i=0；i的文本”；
解析文本（text）；
解析文本二（文本）；

html（不相关）：

---

提前感谢。

我想您需要一个

Array.prototype.filter（）方法来获取html元素：


function parse_text_two（文本）{
var div=document.createElement（“div”）；
div.innerHTML=文本；
var elements=[].filter.call（div.childNodes，函数（el）{
返回el.nodeType！==3；
});
var container=jQuery（“#container2”）；
var列表=[]；
对于（var p=0；p的文本”；
解析文本二（文本）
您可以在此处查看更新的小提琴

根据需要，它在控制台中为两个方法返回相同的结果

function parse_text_two(text) {    
    var div = document.createElement("DIV");
    div.innerHTML = text;
    var elementsOrg = div.childNodes;
    var elements = Array.prototype.slice.call(elementsOrg);;
    var container = jQuery("#container2");
    var list = [];
    for (var p = 0; p < elements.length; p++){
        var element = elements[p];
        list.push(element);
        console.log("Second", list);
        container.append(element);
    }
}

函数parse_text_two（text）{
var div=document.createElement（“div”）；
div.innerHTML=文本；
var elementsOrg=div.childNodes；
var elements=Array.prototype.slice.call（elementsOrg）；；
var container=jQuery（“#container2”）；
var列表=[]；
对于（var p=0；p
在每个循环的第二个函数中注释此行容器。追加（元素）
 我通过在循环中放置调试点看到的问题是：

container.append（元素）语句实际上正在修改元素数组，并从数组中删除附加的元素。这意味着在循环中，对于“p”的各种值，元素数组如下所示：

p = 0 -> elements : [ text, b, text, p, text ] // text node at 0 picked
p = 1 -> elements : [ b, text, p, text ] // text node at 1 picked
p = 2 -> elements : [ text, p, text ] // text node at 2 picked

这就是为什么循环只运行了3次，而不是元素数组的原始长度，即5次

这可能是因为jQuery将节点从其原始位置“移动”到容器div

您可以克隆元素节点，然后将其附加到容器中：

function parse_text_two(text) {
    var div = document.createElement("DIV"),
        p,
        element,
        elements,
        container = jQuery("#container2"),
        list = [];

    div.innerHTML = text;
    elements = div.childNodes;

    for (p = 0; p < elements.length; p++){
        element = elements[p];
        list.push(element);
        console.log("Second", list);
        container.append($(element).clone());
    }
}

function parse_text_two（文本）{
var div=document.createElement（“div”），
P
元素，
元素，
container=jQuery（“#container2”），
列表=[]；
div.innerHTML=文本；
元素=div.childNodes；
对于（p=0；p

或者按照文卡特什的回答使用while循环。无论如何，最好知道根本原因。：）

希望这有帮助。
目标是什么？两种方法都很有效。。。您面临的问题是什么？当应用程序运行element.length包含5时，问题出现在第二个函数中，但对于每次迭代，该长度都会发生更改，element.length变为3。这是因为container.append函数。请您向我解释一下，为什么这与我的操作方式有什么不同？因为这是一个集合，一个类似数组的对象，但不是实际的数组，如果您使用以前的代码记录
元素
，您可以看到除子节点之外还有其他内容。
p = 0 -> elements : [ text, b, text, p, text ] // text node at 0 picked
p = 1 -> elements : [ b, text, p, text ] // text node at 1 picked
p = 2 -> elements : [ text, p, text ] // text node at 2 picked

function parse_text_two(text) {
    var div = document.createElement("DIV"),
        p,
        element,
        elements,
        container = jQuery("#container2"),
        list = [];

    div.innerHTML = text;
    elements = div.childNodes;

    for (p = 0; p < elements.length; p++){
        element = elements[p];
        list.push(element);
        console.log("Second", list);
        container.append($(element).clone());
    }
}