提问者:小点点

我如何找到不在div元素中的文本?


我尝试找到不在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>

共1个答案

匿名用户

为此,您可以使用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>