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

【问题标题】：Selecting element without element inside jQuery在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'});
});

有什么想法吗？

【问题讨论】：

标签： jquery css jquery-selectors

【解决方案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
     }
});

【讨论】：