Выбор элемента без элемента внутри jQuery

Question

У меня есть этот код:

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

Я хочу выбрать только число, которое я буду сравнивать, и если оно больше единицы, я хочу добавить к нему CSS. Я закодировал что-то вроде показанного ниже, но код не работает. Следующая проблема заключается в том, что я не могу использовать класс view для цели, только external. если я попробую .external:not(small) в CSS, это сработает.

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

Есть идеи?

Answer 1

Вы можете отфильтровать contents() элемента по nodeType. 3 возвращает текстовые узлы. Это то, что вы ищете.

Затем оберните этот элемент внутри диапазона с классом и присвойте этому классу любые стили 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>

Answer 2

пожалуйста, заверните число в span tag

<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
     }
});