Question

第一个例子我做错了什么？它不是针对跨度和应用背景颜色。但第二个例子效果很好

第一

    if($(".done").length > 0) {
        $(this).css("background","red");
    }

第二

    if($(".done").length > 0) {
        $(".done").css("background","red");
    }

Answer 1

this值不受仅通过jQuery运行选择器的影响。实际上，您无法在特定函数的范围内更改this值。

你可以试试这个：

if($(".done").length > 0) {
    $('done').each(function() { $(this).css("background","red"); });
}

最好暂时缓存$(".done")。在这种情况下，如果真的是那里的所有代码，那么就没有理由对长度进行测试。

Answer 2

$(this)范围在迭代对象列表的函数中可用

，例如.each()，.exists()等，而不是简单的if/else条件

这应该是什么：

$(".done").each(function(){
    $(this).css("background","red");
});

Answer 3

您只需用以下内容替换整个if条件：

$(".done").css("background", "red");

如果没有元素匹配您的CSS选择器将返回一个空数组，什么也不会发生。如果有匹配的元素，则会对所有元素应用红色背景颜色。

就您对this变量的问题而言，它通常在匿名回调中可用，但不在if条件内。

Answer 4

this引用并定位当前选定的对象/元素。您的if语句未选择任何内容：

if($(".done").length > 0) { // tests if $('.done') exists, but doesn't select the objects.
    // therefore the 'this' doesn't target/refer to anything
    $(this).css("background","red");
}

尝试改为：

if ($('.done').length) {
    $('.done').css('background-color','red');
}

JS Fiddle demo

值得注意的是，if测试$('.done')选择器返回的对象是否存在，如果省略if测试，则选择器不匹配任何内容，jQuery不会抛出错误，它只是不执行任何操作（JS Fiddle demo）。

在这种特殊情况下，使用纯JavaScript来获得相同的结果并不困难：

var doneClassElem = document.getElementsByClassName('done');

for (i=0; i<doneClassElem.length; i++){
    doneClassElem[i].style.backgroundColor = 'red';
}

JS Fiddle demo

Answer 5

jQuery只在回调中绑定到此，但你根本就没有使用回调。

$('.done').click(function() {
  $(this).hide()
});

阻止在代码中覆盖调用$()函数的常用方法是将结果缓存到本地var。

var $done = $('.done')
if ($done.length > 0) {
  $done.css('background', 'red');
}

有些不相关，但您不需要进行length检查。即使jQuery选择器匹配零项，您也可以安全地调用该组上的其他jQuery方法而不会出现错误。

另外，你应该在这里使用css类，而不是像这样编辑内联样式。然后使用addClass()使其成为样式表中具有红色的类。

然后所有这些代码变得非常简单：

$('.done').addClass('myClassThatMakesItRed');

Answer 6

如果这是您的整个代码，那么它将无法工作，因为this将是全局对象，这可能是浏览器中的窗口。

当您使用jQuery绑定到事件时，事件处理函数的上下文已更改，以便引用触发事件的元素。

您的代码可以更好地表达为

$(".done").css("background", "red")

因为你真的不需要检查是否有任何匹配的元素。

Answer 7

在你的第一个例子中这个是多么的暧昧。请注意， this 是任何函数的调用上下文。如果你在jQuery中的事件处理程序中使用该代码片段而不是它可以工作。

示例：

// won't work
function red() { 
    // this = window -- in this case
    $(this).css("background","red");
}
red();

// works
$(".done").click(function() {
    // this = $(".done") -- set by jQuery
    $(this).css("background","blue");
});

Answer 8

this的内容不受if语句的影响。以不同的方式编写相同的代码可能会让您更清楚。

你的代码是：

if($(".done").length > 0) {
  $(this).css("background","red");
}

您希望this引用$(".done")数组。以下内容在语义上完全相同：

var l = $(".done").length;
var z = 0;
if(z < l) {
  $(this).css("background","red");
}

该示例中this引用了什么？

在这两个示例中，this指的是同一个东西：可能是HTML页面的window对象。您看，this指的是您的代码在其中运行的函数的父对象。

尝试以下方法：

<script>

    alert(this == window); // true

    function function1(){
        alert(this == window); // true
    }
    function1();


    // now let's create our own instance of an object

    var myObject = new Object();

    myObject.method1 = function(){
        alert(this == myObject); // true
    }

    myObject.method1();

</script>

希望这有帮助。

javascript“this”未能定位

8 个答案: