我有一组具有相同类的span标签。我试图使用一个过滤函数来获取文本值小于零的所有跨度的计数。我使用了类似的东西
$('#go').on('click', function(){
var $nonneg = $('.test').filter(function(){
return parseInt(this.text) < 0;
});
if ($nonneg.length !=0){
alert('fail');
}else{
alert('pass');
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="test">0</span>
<span class="test">0</span>
<span class="test">0</span>
<span class="test">-5</span>
<br/>
<button id="go">go</button>
使用输入值，但我试图找出如何使用元素的.text来做到这一点。
答案 0 :(得分：1)
纯JavaScript中没有text属性。请改用textContent。
$('#go').on('click', function(){
var $nonneg = $('.test').filter(function(){
return parseInt(this.textContent) < 0;
});
if ($nonneg.length !=0){
alert('fail');
}else{
alert('pass');
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="test">0</span>
<span class="test">0</span>
<span class="test">0</span>
<span class="test">-5</span>
<br/>
<button id="go">go</button>
答案 1 :(得分：0)
$('#go').on('click', function(){
var $nonneg = $('.test').filter(function(){
return parseInt($(this).text()) < 0;
});
if ($nonneg.length !=0){
alert('fail');
}else{
alert('pass');
}
})
答案 2 :(得分：0)
不使用过滤器的可能解决方案。
<div class="container-fluid">
<div class="sideBar">
<div class="nav">
<center>
<h1>CSS</h1>
<nav>
<a href="#intro" rel="internal" id="aIntro">Introduction</a>
<a rel="internal" id="aBackground" href="background">Backgrounds</a>
<a href="#borders" rel="internal" id="aBorders">Borders</a>
<a id="aBoxModel" rel="internal" href="#boxModel">Box Model</a>
<a rel="internal" id="aFonts" href="#fonts">Fonts</a>
<a href="#icons" rel="internal" id="aIcons">Icons</a>
<a href="#links" id="aLinks" rel="internal">Links</a>
<a href="#float" id="aFloat" rel="internal">Float</a>
<a href="#inlineBlock" id="aInlineBlock" rel="internal">Inline-block</a>
<a href="#align" rel="internal" id="aAlign">Align</a>
<a href="#pseudoClass" rel="internal" id="aPseudoClass">Pseudo Class</a>
</nav>
</div>
</center>
</div>
<div class="words">
<div class="article">
<main id="main-doc">
<h2 id="intro"><u>Introduction</u></h2>
<p>CSS stands for Cascading Style Sheets. It was created on November 4, 1997. It fills a web page with pizazz. It describes how elements are displayed on a page</p>
<hr>
<h2 id="background"><u>Backgrounds</u></h2>
<p>The background property is used to change the background of an HTML element. You can use the background-color property like this:</p>
<code>h1 { background-color: blue; }</code>
<p>The background-image property is also very useful.</p>
<code>h2 { background-image: url(""); }</code>
<hr>
<h2 id="borders"><u>Borders</u></h2>
<p>The border property adds a border to any HTML element. It is very useful in separating one element from another.</p>
<code>.class {border-style: solid;}</code>
<p>There are many different ways to style a border, and they can become essential to any project</p>
<hr>
<h2 id="boxModel"><u>Box Model</u></h2>
<p>Every HTML element is a set of boxes. They are: margin, border, padding, and content. These are all moveable and the four of them together make up the box model.</p>
<img src="http://www.expression-web-tips.com/images/w3schools-box-model.jpg" alt="An image showing the way the box model works">
<hr>
<h2 id="fonts"><u>Fonts</u></h2>
<p>The amount of things you can do with the fonts in CSS are abundant. To set a font, you would use the font-family property.</p>
<code>h3{font-family: serif;}</code>
<p>You can also change the color of the fonts using the color property. Be sure you do not mix up the color property and the background-color property.</p>
<code>p{color: blue;}</code>
<hr>
<h2 id="icons"><u>Icons</u></h2>
<p>One of the most easy ways to use icons on your project is to import a third-party library such as Font-Awesome. Google and Bootstrap also have many very cool, very high-quality icons. All of these, however, bust be imported. You can find instructions
on how to do this on their websites.</p>
<hr>
<h2 id="links"><u>Links</u></h2>
<p>Using the HTML anchor tag (a), one can create a link to anywhere on the internet. Suprisingly, there are many ways to use CSS to style a link.</p>
<code>/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}</code>
<hr>
<h2 id="float"><u>Float</u></h2>
<p>When you use the float property, it shows how an element will float around another.</p>
<code>h2 { float: right; };</code>
<p>In the code above, it shows how all the h2 elements will float to the right around the elements around it.</p>
<hr>
<h2 id="inlineBlock"><u>Inline-block</u></h2>
<p>The inline-block property turns a normal elemtns into an inline element that can have a width and height</p>
<code>.inline { display: inline-block; width: 30px; height: 20px;}</code>
<hr>
<h2 id="align"><u>Align</u></h2>
<p>The align property is, in my opinion, one of the most useful CSS properties out there. It allows one to align an element either right, left, center, or justify. You can achieve this by either using the text-align, image-align, align, or margin
properties.</p>
<code>h2 {margin: auto;}</code>
<hr>
<h2 id="pseudoClass"><u>Pseudo Class</u></h2>
<p>A pseudo class shows what happens to an element when a certain event happens. You use it by typing your selector and then a colon and the event.</p>
<code>btn:hover {background-color: blue;}</code>
<p>This would turn the background of the button blue after the user hovers over it</p>
</main>
</div>
</div>
</div>$('#go').on('click', function() {
var lessThanZeroCount = 0;
$('.test').each(function() {
if (parseInt($(this).text()) < 0) {
lessThanZeroCount++;
}
}).promise().done(function() {
alert('spans with numbers less than zero = ' + lessThanZeroCount);
});
})
小提琴