的JQuery無法找到分配給新追加的HTML字符串

Question

我有一個HTML串ID，我用類parent的myid的id（HTML中的字符串）分配div。然後，我將這個HTML字符串附加到ID爲main的元素。使用瀏覽器inspect工具我可以看到id已被事實分配，但由於某種原因，JQuery不知道新分配的id。

var html = ` 
<div class="parent"> 
    <div id="content" > 
    </div> 
<div>` 

var newHtml = $(html); 
newHtml.find('.parent').attr('id','myid'); 
$('#main').append(newHtml); 

console.log($('.parent').attr('id')); // Logged as undefined. 

Answer 1

$.fn.find()靶向後代元素，其中作爲$.fn.filter()目標在同一水平的元件的製造方法。按照您的HTML .parent處於頂級水平，因此您需要使用$.fn.filter()，同時設置元素的ID。

var html = `<div class="parent"> 
 
    <div id="content" > 
 
    </div> 
 
<div>` 
 

 
var newHtml = $(html); 
 
newHtml.filter('.parent').attr('id','myid'); 
 
$('#main').append(newHtml); 
 

 
console.log($('.parent').attr('id'));

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

或者，你並不需要使用$.fn.find()可言。只需直接使用.attr()

var html = `<div class="parent"> 
 
    <div id="content" > 
 
    </div> 
 
<div>` 
 

 
var newHtml = $(html); 
 
newHtml.attr('id','myid'); 
 
$('#main').append(newHtml); 
 

 
console.log($('.parent').attr('id'));

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

Answer 2

你應該結合使用find法andSelf()方法。

andSelf()方法將堆棧上的前一組元素添加到當前集合中。

瞭解更多here。 。

var html = `<div class="parent"> 
 
    <div id="content" > 
 
    </div> 
 
<div>`; 
 

 
var newHtml = $(html); 
 
newHtml.find('.parent').andSelf().attr('id','myid'); 
 
$('#main').append(newHtml); 
 
console.log($('.parent').attr('id'));

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