jQuery的wrap和appendTo没有达到预期的结果

jQuery wrap and appendTo doesn't lead in expected result

本文关键字：结果 wrap appendTo jQuery      更新时间：2023-09-26

我试图在div容器内包装一些HTML内容，然后将span附加到该容器。但是我不明白为什么附加的span没有出现。

所以我很好奇我是否做错了什么。

$('button').click(function() {
	
    var $container = $('<div class="container"></div>');
	$('.target').wrap($container);
			
    $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>

这是因为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>

旁注:你的代码被隐式全局变量的恐怖所折磨，因为你没有声明$label。声明变量是很重要的。你可以使用严格模式让JavaScript引擎阻止你隐式地创建全局变量。

这是因为$container指的是变量而不是被包装元素的对象。您需要获取对象或使用相关选择器附加到容器元素:

$label.appendTo('.container');
演示工作

原因是.wrap()方法将匹配元素集中的每个元素用一个新的元素结构- $container的副本包装。

$container本身不是包装元素，它只是一个用于包装元素的"模板"，所以如果你想进一步操作它们，你需要获取实际的元素。

这当然很容易理解，只要你考虑到在调用之后可以有不止一个这样的元素。

$('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>

相关文章：