我尝试找到不在div元素中的文本,并将其包装到div:
null
$( ".details" ).text().wrap( "<div></div>" );
.details div {
font-size: 11px;
color: #777;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 0;
margin: 0;
border-top: 1px solid rgba(0,0,0, .05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details">
<div>monkey</div>
elephant
<div>rabbit</div>
<div>sun</div>
<div>moon</div>
<div>bird</div>
</div>
null
我找不到正确的方法。
我试图达到的结果是:
<div class="details">
<div>monkey</div>
<div>elephant</div>
<div>rabbit</div>
<div>sun</div>
<div>moon</div>
<div>bird</div>
</div>
为此,您可以使用contents()
和filter()
的组合来检索子文本节点。然后您可以使用wrap()
将它们包围在div
中:
null
$('.details')
.contents()
.filter((i, node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
.wrap('<div />');
.details div {
font-size: 11px;
color: #777;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 0;
margin: 0;
border-top: 1px solid rgba(0, 0, 0, .05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details">
<div>monkey</div>
elephant
<div>rabbit</div>
<div>sun</div>
<div>moon</div>
<div>bird</div>
</div>