为numbers添加类

Question

我在常规语句中的段落中添加了一个类：

​

$("p").each(function(i, elem) {
  typeof elem === "number" ?
    ($("p").addClass("number")) :
    ($("p").addClass("other"))
})

.number {
  color: blue;
}

.other {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>abc</p>
<p>123</p>
<p>dynia</p>
<p>semolina</p>
<p>ogór</p>
<p>234</p>
<p>2345</p>

​

但是所有的元素都是绿色的(像非数字)。如果我没有添加类类型console.log(True/False)，我就会得到正确的结果。

Answer 1

elem的类型始终为object。您需要elem的文本内容，可以使用jQuery的.text()方法获得该内容。但是，文本内容是一个字符串，您可以使用isNaN()检查它是否可以转换为数字：

​

$("p").each(function(i, elem) {
  var $el = $(elem);
  $el.addClass(isNaN($el.text()) ? 'other' : 'number');
})

.number {
  color: blue;
}

.other {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>abc</p>
<p>123</p>
<p>dynia</p>
<p>semolina</p>
<p>ogór</p>
<p>234</p>
<p>2345</p>

​

Answer 2

使用jQuery：

​

$(function() {
  $("p").each(function() {
      $(this).addClass(isNaN($(this).text()) ? "number" : "other")
  })
})

.number {color: blue} .other {color: green}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>abc</p>
<p>123</p>
<p>dynia</p>
<p>semolina</p>
<p>ogór</p>
<p>234</p>
<p>2345</p>

​

使用常规Javascript：

​

document.querySelectorAll("p").forEach((el) => {
    el.classList += isNaN(el.textContent) ? "other" : "number"
})

.number {color: blue} .other {color: green}

<p>abc</p>
<p>123</p>
<p>dynia</p>
<p>semolina</p>
<p>ogór</p>
<p>234</p>
<p>2345</p>

​