Question

我想在<input type="text">文本周围打包hello world。 Span不应该被它包围。

<div class="outer">
    "hello world"
    <span class="inner">Inner</span>
</div>

$('.inner').parent().contents().wrap('<input type="text"/>')

这个包围文本和跨度的输入。我想避免跨越。谁能帮帮我吗。 fiddle

Answer 1

您无法在某些内容周围打包文本字段，您需要

＆＃13;

var el = $('.inner')[0].previousSibling;

$('<input />').val(el.nodeValue.trim()).insertBefore('.inner');
$(el).remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  "hello world"
  <span class="inner">Inner</span>
</div>

＆＃13;

Answer 2

您可以将内部div保存在变量中，然后在替换外部div中的内容后将其附加到末尾。像这样：

// Save the inner tag
var inner = document.querySelector(".inner").outerHTML;

// Remove the inner tag
document.querySelector(".inner").parentNode.remove(document.querySelector(".inner"));

// Wrap the text, then add the saved tag. 
document.querySelector(".outer").innerHTML("<input type=\"text\">" 
+ document.querySelector(".outer").innerHTML 
+ "</input>" + inner);

Answer 3

尝试使用.filter()，.replaceWith()

＆＃13;

// return `#text` node having `"hello world"` as `textContent`
var text = $(".inner").parent().contents().filter(function() {
  return this.nodeType === 3 && /hello world/.test(this.textContent)
});
// replace `text` with `input type="text"` element
// having value of `text` `textContent`
text.replaceWith(function() {  
  return "<input type=text value=" + this.textContent + "/>"
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="outer">
  "hello world"
  <span class="inner">Inner</span>
</div>

＆＃13;

Answer 4

从内容中取出第一个元素：

＆＃13;

$('.inner').parent().contents().first().wrap("<input type='text'/>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    "hello world"
    <span class="inner">Inner</span>
</div>

＆＃13;

结果是：

<div class="outer">
    <input type="text">hello world</input>
    <span class="inner">Inner</span>
</div>

请注意，我提供的仅用于帮助您了解contents()方法的工作原理 <input type="text">hello world</input> 不是有效的HTML 。

在文本周围包裹div

4 个答案: