选择 jQuery 内没有元素的元素

Question

我有这个代码：

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

我只想 select 数字，我将比较它，如果大于 1，我想向其添加 CSS。我编写了如下所示的代码，但代码不起作用。下一个问题是，我不能使用 class view 来定位它，只能使用 external。如果我在 CSS 中尝试 .external:not(small) 它有效。

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

有什么想法吗？

Answer 1

请将号码包裹在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
     }
});

Answer 2

您可以通过节点类型过滤元素的contents()。 3 returns 文本节点。这就是您要找的。

然后，用 class 将该元素包裹在一个跨度内，并为 class 提供您想要的任何 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>

选择 jQuery 内没有元素的元素

Selecting element without element inside jQuery

css

jquery

jquery-selectors