Javascript 使用jQuery.append时,子';的父级未获得更新
我正在使用jQueryJavascript 使用jQuery.append时,子';的父级未获得更新,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用jQuery.append()将从一个移动到另一个。但是当它被移动时,它保持相同的父类,当我希望它有新的的父类时 例如,当我将其从.players类移动到.confirm时,它仍然具有.players的父类,而不是.confirm 知道如何更新已移动的的父级吗?还是我只是做错了什么 HTML 尝试将.eq(0).clone()添加到要复制的jquery元素的末尾。这将复制您试图进入ul的li。这是假设您已将playerId设置为某个值,并且在将元素添加到页面后将调用该值 $(docum
.append()
将
从一个
移动到另一个
。但是当它被移动时,它保持相同的父类,当我希望它有新的
的父类时
例如,当我将其从.players
类移动到.confirm
时,它仍然具有.players
的父类,而不是.confirm
知道如何更新已移动的
的父级吗?还是我只是做错了什么
HTML
尝试将.eq(0).clone()添加到要复制的jquery元素的末尾。这将复制您试图进入ul的li。这是假设您已将playerId设置为某个值,并且在将元素添加到页面后将调用该值
$(document).ready(function () {
var playerID = 1000;
$('.listOptions.confirm').append($('#player-li-' + playerID).eq(0).clone());
});
子DOM元素不会自动获取其父元素的类
var listA = $('<ul></ul>').addClass('parentA').appendTo(document.body);
var item = $('<li></li>').appendTo(listA);
console.log(item.hasClass('parentA')); // returns false
var listA=$('
').addClass('parentA').appendTo(document.body);
变量项=$(“”)。附录(列表A);
console.log(item.hasklass('parentA'));//返回false
因此,虽然li元素可能来自其父元素,但子元素和父元素不共享同一类
如果你想搞乱元素的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
//设置列表A和列表项
var listA=$('
').addClass('parentA').appendTo(document.body);
var item=$(').addClass('parentA').appendTo(listA);
console.log(item.hasklass('parentA'));//返回true
//设置列表B并将列表项移动到列表B
var listB=$('
').addClass('parentB').appendTo(document.body);
清单b.追加(项目);
console.log(item.hasklass('parentA'));//返回true
console.log(item.hasClass('parentB'));//返回false
//注意:即使子项现在属于不同的父项,类也没有更改
//换班
item.removeClass('parentA')。addClass('parentB');
console.log(item.hasklass('parentA'));//返回false
console.log(item.hasClass('parentB'));//返回true
这取决于你想做什么。元素的实际类不受父元素类的影响。如果您真的想在dom中移动它时更改它的类,则需要直接在javascript代码中添加该类,例如使用jQuery的addClass()
不过,更可能的情况是,如果您只是试图通过选择器对其进行样式设置或以其他方式使其可识别,那么这应该可以在不更改任何内容的情况下工作,例如,$(.confirm li)
,或在css中:
.confirm li {. . .}
如果您的意思是您确实想要更改父元素的类(例如
),那么您可以通过在该父元素上使用removeClass()
和addClass()
的组合来实现(如果需要,可通过parent()
获得).不清楚你想要实现什么,但我是为你做的
希望这就是您想要做的。我最终使用了.clone(false)而不是append()。这似乎是我想要的。谢谢你的建议
编辑:对不起,我使用了.clone(false).appendTo来获取我想要的结果 你能给我看看HTML吗?什么是父类?我会假设这是父元素的类,它与li无关,因此当你移动它时不应该随它移动。发布你用来移动它的js和htmlCould你能做你的工作吗?从那以后,你的问题就没什么意义了,你展示的代码也没有真正揭示你可能遇到的“问题”。好吧,我试试看。基本上,我希望在“.listOptions.confirm”中单击的任何链接不处于活动状态。但是,即使我删除了“选择”类,它们仍然可以单击,就好像该类仍然存在一样。是的,我很抱歉我解释得太差了。我将尝试做一个JSFIDLE。这是你想要做的吗?你检查过JSFIDLE了吗?
// 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
.confirm li {. . .}