Question

因此。我必须创建一个div，并在一些元素中，而不是给它们一些ID。

var $mainDiv = $("#wrapper").append("<div></div>");
    $mainDiv.attr('id', 'main-div'); 
var $dismissButton = $mainDiv.append("<button>X</button>");
    $dismissButton.attr('id', 'dismissButton');

当我给予解雇按钮时，问题就开始了。结果显示$ maindiv获得了id＆＃34; dismissbutton＆＃34;。它将maindiv与我后面提到的其他id相提并论。

我已经找出了一些问题，但尚未找到解决方案。

提前感谢。

Answer 1

我建议创建<div>元素及其必需的属性，然后使用appendTo()插入文档：

$('<div />', {
    'id' : 'main-div'
}).appendTo('#wrapper');

使用这种方法，您可以直接将id（'main-div'）分配给创建的元素（可以创建其他元素类型，当然也可以类似地分配其他属性）），然后将该元素附加到#wrapper元素。

值得指出的是，在您自己的方法中，问题是append()返回附加内容附加到的元素，不附加内容本身。因此，要继续您自己的方法，您只需使用find()：

// finds all <div> descendants of the '#wrapper' element:
var $mainDiv = $("#wrapper").append("<div></div>").find('div').attr('id', 'main-div');

或者：

// finds only the direct descendants (the children)
// of the '#wrapper' element:
var $mainDiv = $("#wrapper").append("<div></div>").children('div').attr('id', 'main-div');

当然，这会将id分配给所有找到的<div>元素，这会导致HTML无效;因此，您必须指定哪个 <div>：

var $mainDiv = $("#wrapper").append("<div></div>").children('div').last().attr('id', 'main-div');

参考文献：

Answer 2

问题在于这一行：

var $dismissButton = $mainDiv.append("<button>X</button>");

append函数不返回表示附加HTML的jQuery对象。它将返回$mainDiv jQuery对象。这就是你看到你提到的行为的原因。

而是将dismiss按钮创建为jQuery对象并将其附加到主div。然后给它一个ID。

var $dismissButton = $("<button>X</button>").appendTo($mainDiv);

$dismissButton.attr('id', 'dismissButton');

或在创建时为其提供ID

var $dismissButton = $("<button>X</button>", { 
    id : "dismissButton" 
}).appendTo($mainDiv);

Answer 3

这将做你想要的：

$("#wrapper").append(
    $("<div>").attr("id", "main-div")
        .append(
            $("<button>")
               .text("X")
               .attr("id", "dismissButton")));

Demo

Answer 4

您的脚本存在的问题是：

var $dismissButton = $mainDiv.append("<button>X</button>");

您将$ mainDiv分配给$ dismissButton。你需要使用这样的东西：

$mainDiv.append("<button id='dismissButton'>X</button>");

或类似的东西：

$mainDiv.append("<button id='dismissButton'>X</button>");
$mainDiv.children('button').attr('id', 'dismissButton');

Answer 5

你可以这样试试：

var $mainDiv = $("<div>Main Div</div>");
  $mainDiv.attr('id', 'main-div');
var $dismissButton = $("<button>X</button>");
  $dismissButton.attr('id', 'dismissButton'); 
  $mainDiv.append($dismissButton);

$('#wrapper').append($mainDiv);

小提琴：http://jsfiddle.net/88qxa7vy/

为多个子元素jQuery分配ID

5 个答案: