新类 jquery 找不到具有最近添加的类的元素答案

【问题标题】：Element with recently added class cannot be found by new class jquery新类 jquery 找不到具有最近添加的类的元素
【发布时间】：2015-04-21 18:41:23
【问题描述】：

我正在尝试从在同一函数中获得类的元素中获取信息，但找不到该类：

HTML：

<style>
  .class-b { background: red; }
</style>

<div class="class-a">Hello!</div>
<div class="class-a">Hola!</div>
<div class="class-a">Bonjour!</div>

<button class="clicker">Click</button>

JS/jQuery:

var $b = $(".class-b");

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    console.log($b.html());
});

当我应该在我的console.log 中获得Hello! 时，这不会返回任何内容。所以后来我想，也许函数还没有完成，类还没有渲染，因此找不到。所以我从函数中删除了日志并将其插入到回调中：

var $b = $(".class-b");

function c_log() {
  console.log($b.html());
}

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    c_log();
});

但仍然没有返回任何内容。我是否忽略了 DOM 的某些内容？

【问题讨论】：

$b 怎么会知道，在被声明之后，你会在元素中添加一个名为“class-b”的类？您需要在单击事件中重新定义 b 。简而言之，$b 不会自动更新。

标签： javascript jquery css dom

【解决方案1】：

您的$b 是当时所有类名为“.class-b”的元素。仅仅因为你给一个新元素的类名“.class-b”并不意味着$b会被更新。

只需重置您的$b...

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    $b = $('.class-b');
    console.log($b.html());
});

【讨论】：

【解决方案2】：

当你写了：

var $b = $(".class-b");

实际上是将任何当前 b's 放入$b 变量中。当您稍后在代码中使用 $b 时，它不会追溯检查新增内容。将上面的行放在你的click回调中，每次都会重新检查它，你就是金子。

【讨论】：

【解决方案3】：

问题是$b 是在.class-a:first 被赋予类.class-b 之前定义的，所以$b.html() 是未定义的，因为.class-b 没有元素。添加类时需要重新定义$b：

var $b = $(".class-b");

function c_log() {
  console.log($b.html());
}

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    $b = $(".class-b");
    c_log();
});

JSFiddle Demo

【讨论】：