jQuery多項選擇不起作用

Question

我有一個使用id創建的div，並使用預設的CSS屬性添加了span

$(".main").append("<div class=largeBox id=" + counter + "</div>");
$(".largeBox").append("<span class=mainTitle></span>");

然后，我試圖將文本加載到框中，但是選擇無法正常工作。 誰能告訴我為什么？

var id = "#" + counter;
$(id + " .mainTitle").text(title);

Answer 1

您追加的內容並不完全正確。 您需要在class和id屬性周圍添加引號。

另外，您會錯過div的close>標簽。

$(".main").append('<div class="largeBox" id="' + counter + '"></div>');
$(".largeBox").append('<span class="mainTitle"></span>');

Answer 2

您必須將class和id值放在引號中。 您可以使用兩種類型的引號： "和' 。

 var counter = 0; $(".main").append("<div class='largeBox' id='" + counter + "'></div>"); $(".largeBox").append("<span class='mainTitle'></span>"); var id = "#" + counter; $(id + " .mainTitle").text("test"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> </div> 

Answer 3

你實際上並不需要有各地的類名或ID報價，我故意忽略他們在我的答案在這里展示，這不是問題。
您遇到了一個問題，您實際上是將所有跨度附加到所有先前的bigbox div中。 我添加了一個for循環，以便您可以看到它現在的工作方式，但是使用$(".largeBox").eq(counter)可使標題分別附加到每個div。

另外，ID不應以數字開頭（如果您想支持HTML4瀏覽器），因此ID的形式現在是lb-number （對於largeBox為lb）

 var counter = 0; for(counter=0;counter<5;counter++){ $(".main").append("<div class=largeBox id=lb-" + counter + "></div>"); $(".largeBox").eq(counter).append("<span class='mainTitle'></span>"); var id = "#lb-" + counter; $(id + " .mainTitle").text("test"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> </div>