在jQuery中选择没有元素的元素

Posted 2023-05-09

【中文标题】在jQuery中选择没有元素的元素

【英文标题】：Selecting element without element inside jQuery

【发布时间】：2020-05-21 08:51:40

【问题描述】：

我有这个代码：

<div class="external">
    <div class="view">
        <small class="times">×</small> 2        
    </div>
</div>

我只想选择数字，我会比较它，如果大于一，我想添加 CSS。我编写了如下所示的代码，但代码不起作用。下一个问题是，我不能使用view 类来定位它，只能使用external。如果我在 CSS 中尝试 .external:not(small) 就可以了。

$().ready(function () 
    $('.external:not(small)').filter(function(index)
        return parseInt(this.innerhtml) > 1;
    ).css('color':'red');
);

有什么想法吗？

【参考方案1】：

您可以通过nodeType过滤元素的contents()。 3 返回文本节点。这就是你要找的。​​p>

然后，用一个类将该元素包装在一个 span 中，并为该类提供任何你想要的 css 样式。

$( ".view" ).contents().filter(function() 
      return this.nodeType === 3 && $.trim(this.nodeValue) !== ''
).wrap( "<span class='number'></span>" )

span.number 
color:red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="external">
  <div class="view">
  <small class="times">×</small> 2        
  </div>
</div>

【参考方案2】：

请在span标签中包裹数字

<div class="external">
<div class="view">
<small class="times">×</small>
<span>2</span>        
</div>
</div>

$().ready(function () 
    let numTag = $('.external span');  //get span tag
    if (parseInt(numTag.text()) > 1)   // check for the condition
         numTag.css('color':'red');  //apply your css
     
);