jQuery包裝和appendTo不會導致預期的結果

我試圖包裝div容器中的一些HTML內容，然後追加跨度到該容器。但我無法弄清爲什麼附加跨度不會出現。jQuery包裝和appendTo不會導致預期的結果

所以我很好奇，如果我做錯了什麼。

$('button').click(function() { 
 
\t 
 
    var $container = $('<div class="container"></div>'); 
 
\t $('.target').wrap($container); 
 
\t \t \t 
 
    $label = $('<span class="duration-label">Hi there</span>'); 
 
\t $label.appendTo($container); 
 
});

.target { 
 
    border: 1px solid black; 
 
} 
 

 
.container { 
 
    background: red; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="target"> 
 
    <span>This is some unimportant text</span> 
 
</div> 
 
<button type="button">Click me</button>

來源

2015-10-13 Behnil

我不知道你是否注意到我的答案，只是爲了讓你知道我解釋了爲什麼'wrap'以這種方式工作的，你想知道的情況下... – Amit

@Amit我感謝。我剛剛選擇了T.J. Crowder的答案是第一位的。兩個答案都是相似的，都是對的。 – Behnil

這很好，我想提請你注意那裏的額外信息。我希望這能幫助你進一步理解這個問題。 – Amit

這是因爲wrap讓你給它包裝的副本，它不使用你直接給它的那個。你追加到你給的那個。

相反，使用你的周圍包裹的內容之一：

$('button').click(function() { 
 

 
    // Wrap .target with the div, and get a reference to 
 
    // the newly-created wrapper 
 
    var $container = 
 
      $('.target') 
 
       .wrap('<div class="container"></div>') 
 
       .parent(); 
 

 
    // Add a label to it 
 
    var $label = $('<span class="duration-label">Hi there</span>'); 
 
    $label.appendTo($container); 
 
});

.target { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    background: red; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="target"> 
 
    <span>This is some unimportant text</span> 
 
</div> 
 
<button type="button">Click me</button>

邊注：您的代碼是墮入The Horror of Implicit Globals因爲你沒有申報$label。聲明變量很重要。您可以使用嚴格模式讓JavaScript引擎不讓您隱式創建全局變量。

來源

2015-10-13 07:50:26

感謝您指出可變問題。 – Behnil

這是因爲$container是指變量和不纏繞元件的對象。你需要獲取對象或使用相關選擇追加到容器元素：

$label.appendTo('.container');

Working Demo

來源

2015-10-13 07:47:54

如果頁面上有其他*'.container'元素，這當然會有點問題。 –

@ T.J.Crowder：當然可以。您提供的解決方案更有前途。 –

的原因是，該.wrap()方法包裝集合中的匹配元素的一個新的元件結構中的每個元件 - 的$container副本。

$container$container本身不是包裝元素，它只是包裝元素的「模板」，所以如果你想進一步操縱它們，你需要抓住實際的元素。

這當然很容易理解，一旦你考慮到這個事實後，可能會有更多的1個這樣的元素。

$('button').click(function() { 
 

 
    var $container = $('<div class="container"></div>'); 
 
    var $wrappingContainer = $('.target').wrap($container).parent(); 
 

 
    // sanity check: 
 
    if($container[0] == $wrappingContainer[0]) { 
 
    alert('Same object?!?!'); // Should not happen 
 
    } 
 

 
    $label = $('<span class="duration-label">Hi there</span>'); 
 
    $label.appendTo($wrappingContainer); 
 
});

.target { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    background: red; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="target"> 
 
    <span>This is some unimportant text</span> 
 
</div> 
 
<button type="button">Click me</button>

來源

2015-10-13 07:52:11 Amit

jQuery包裝和appendTo不會導致預期的結果

回答

相關問題