jquery - jQuery if/else with :not 不起作用

Question

http://jsfiddle.net/ySLkQ/16/

jQuery

if ($("h1.change:contains('-')")) {
    $("h1.change").append(" it's negative");
} else if ($("h1.change:not(contains('-'))")) {
    $("h1.change").append(" it's positive");
}

HTML：

<h1 class="change">-30</h1>
<h1 class="change">30</h1>

基本上不管我做什么，最后<h1>总是显示负面

Answer 1

你if只执行一次。

它检查 $("h1.change:contains('-')") 的计算结果是否为真 - 它返回一个元素，所以它是真的。

之后，它将“它是负面的”应用于所有 h1.change 元素。

else 部分永远不会执行。

$("h1.change").not(":contains('-')").append(" it's positive");
$("h1.change:contains('-')").append(" it's negative");

将按您的预期工作 - 每个选择器将评估为一个元素列表，并且 append() 将在所有元素上执行。

Answer 2

Arun 指出了缺失:，但您可以使用 jQuery 更有效地执行此操作：

var change = $("h1.change"),
    negative = change.filter(":contains('-')"),
    positive = change.not(negative);

// you can do the appends above, but I prefer the clarity
negative.append(" it's negative");
positive.append(" it's positive");

此外，第一个 if 总是会影响其他change元素。使用上述方法将保留两个互斥组。

Answer 3

用这个

$('h1.change').html(function(val, html){
    return html + ( html.indexOf('-') == -1 ? " it's positive" : " it's negative" )
});

演示：小提琴

Answer 4

$.each()您也可以通过函数来​​实现这一点。这更好，因为您希望将字符串附加到h1具有相同选择器条件的多个元素。如果您尝试编写单个语句，则可能会导致一些问题，例如在不需要时将相同的值写入多个元素。虽然$.each()可能效率不够。出于效率考虑，@DThought 的答案要好得多，您已经接受了它作为答案。

$("h1.change").each(function(index){
    if ($(this).text().indexOf("-")!=-1) {
        $(this).append(" it's negative");
    }else{
        $(this).append(" it's positive");
    }
});