Question

当我尝试使用jQuery 1.11.1以下列方式附加html时;

var containerObject = $("#idToSomeElement")

var _uniqueIdDiv = containerObject.append("<div id='container'></div>");

var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

“container”div按预期附加在“idToSomeElement”内，但是以下追加的“container”和“play_pause_div”也会出现在“idToSomeElement”div中。

使用jQuery的这种级联用法是不支持/错误还是我做错了什么？

显然我错了，我的问题变成了“如何在不重新使用选择器的情况下链接附加内容？”正如@SergTomcat猜对了。

然后，为了能够从这些级联函数中创建一个树，它就像这样;

var _uniqueIdDiv = containerObject.append("<div id='container' class='container'></div>").children("#container");

var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>").children("#play_pause_div");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

var _volumeDiv = _uniqueIdDiv.append("<div id='volume_div' class='volume_div'></div>").children("#volume_div");
var _muteDiv = _volumeDiv.append("<div id='mute_div' class='mute_div'></div>");
var _unmuteDiv = _volumeDiv.append("<div id='unmute_div' class='unmute_div'></div>");


var _progressBarDiv = _uniqueIdDiv.append("<div id='progress_bar' class='progress_bar'></div>").children("#progress_bar");
var _progressBackgroundDiv = _progressBarDiv.append("<div id='progress_bar_background' class='progress_bar_background'></div>");
var _progressAmountDiv = _progressBarDiv.append("<div id='progress_amount' class='progress_amount'></div>");
var _progressPointerDiv = _progressBarDiv.append("<div id='progress_pointer class='progress_pointer'></div>");

Answer 1

append会返回您的containerObject，而不会返回您正在创建的新元素。这就是使jQuery函数可链接的原因。

Answer 2

containerObject.append（）返回 containerObject 对象的引用。你需要做这样的事情：

var _uniqueIdDiv = containerObject.append("<div id='container'></div>").children();

Answer 3

试试这个。

你需要让孩子们追加新的div，并且需要使用$（varname）

var containerObject = $("#idToSomeElement");

var _uniqueIdDiv = $(containerObject).append("<div id='container'></div>").children();

var _playPauseDiv = $(_uniqueIdDiv).append("<div id='play_pause_div' class='play_pause_div'></div>").children();;
var _playButtonDiv = $(_playPauseDiv).append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = $(_playPauseDiv).append("<div id='pause_div' class='pause_div'></div>");

也有这种方式

var containerObject = $("#idToSomeElement");

var _uniqueIdDiv = $("<div id='container'></div>").appendTo(containerObject);

var _playPauseDiv = $("<div id='play_pause_div' class='play_pause_div'></div>").appendTo(_uniqueIdDiv);
var _playButtonDiv = $("<div id='play_div' class='play_div'></div>").appendTo(_playPauseDiv);
var _pauseButtonDiv = $("<div id='pause_div' class='pause_div'></div>").appendTo(_playPauseDiv);

Answer 4

append()会返回您的containerObject，而非您要追加的元素。

相反，你可以尝试

var containerObject = $("#idToSomeElement");
var _uniqueIdDiv = $('<div/>',{id:'container'})
containerObject.append(_uniqueIdDiv);
var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

Answer 5

append函数不会返回您要附加的元素，而是容器。

http://jsfiddle.net/XySE7/1/

var containerObject = $("#idToSomeElement")

containerObject.append("<div id='container'></div>");
var _uniqueIdDiv =$('#container');

_uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playPauseDiv = $('#play_pause_div');
 _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _playButtonDiv = $('#play_div');
 _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");
var _pauseButtonDiv = $('#pause_div');

jQuery选择并附加DOM

5 个答案: