Question

我正在使用jQuery .append()将<li>从一个<ul>移到另一个<ul>。但是当它被移动时，它会保持相同的父类，当我希望它拥有新的.players的父类时。

实施例。当我将其从.confirm班级移至.players时，它仍然具有.confirm的父类，而不是<li>。

知道我如何更新移动的<ul class="listOptions confirm"> <li><a href="" class="select">Item 1 that was taken from .players</a></li> </ul> <ul class="listOptions players"> <li id="player-li-1000"><a href="" class="select">Item 1</a></li> </ul>的父级？或者我只是做错了什么？

HTML

$('.listOptions.confirm').append($('#player-li-' + playerID));

的jQuery

{{1}}

Answer 1

子DOM元素不会自动获取其父元素的类。

var listA = $('<ul></ul>').addClass('parentA').appendTo(document.body);
var item = $('<li></li>').appendTo(listA);

console.log(item.hasClass('parentA')); // returns false

因此，虽然 li 元素可能来自其父级inherit some CSS style properties，但子元素和父元素不会共享同一个类！

如果你想要使用元素的CSS类，你必须自己动手。

// Set up list A and list item
var listA = $('<ul></ul>').addClass('parentA').appendTo(document.body);
var item = $('<li></li>').addClass('parentA').appendTo(listA);
console.log(item.hasClass('parentA')); // returns true

// Set up list B and move list item to list B
var listB = $('<ul></ul>').addClass('parentB').appendTo(document.body);
listB.append(item);
console.log(item.hasClass('parentA')); // returns true
console.log(item.hasClass('parentB')); // returns false
// Note classes did not change even though the child item now belongs to a different parent

// Change classes
item.removeClass('parentA').addClass('parentB');
console.log(item.hasClass('parentA')); // returns false
console.log(item.hasClass('parentB')); // returns true

Answer 2

我最终使用.clone（false）代替append（）。这似乎是我想要的伎俩。感谢您的所有建议。

编辑：抱歉，我使用了.clone（false）.appendTo来获取我之后的结果。

Answer 3

尝试将.eq（0）.clone（）添加到您尝试复制的jquery元素的末尾。这将制作你试图进入ul的li的副本。假设您将playerId设置为某个东西，并且在将该元素添加到页面后调用它。

$(document).ready(function () {
    var playerID = 1000;
    $('.listOptions.confirm').append($('#player-li-' + playerID).eq(0).clone());
});

Answer 4

这取决于你想要做什么。元素具有的实际类不受父元素类的影响。如果你真的想在dom中移动它时更改它的类，你需要直接在你的javascript代码中添加该类，例如使用jQuery＆＃39; addClass()。

更有可能的是，如果您只是尝试通过选择器设置样式或以其他方式使其可识别，那么这应该可以在不改变任何内容的情况下工作，例如： $(.confirm li)或css：

.confirm li {. . .}

如果您的意思是您确实想要更改父元素的类（例如<ul>），那么您可以使用removeClass()和addClass()的组合来实现父元素（如果需要，可由parent()获得）。

Answer 5

目前还不清楚你想要实现什么，但我为你做了这个

Demo

希望这是你想要做的。

使用jQuery .append时，child的父级不会获得更新

5 个答案: