javascript - textContent 返回未定义

Question

我有一个表，我想在其中提取事件项目的文本。我使用以下代码执行此操作:

    var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");
    console.log(addedWorkout);
    addedWorkout = addedWorkout.textContent;
    console.log(addedWorkout);

问题是我一直没有定义。我检查了控制台，它确实找到了我想要的元素。

我对 Javascript 比较陌生，但是经过一个多小时的谷歌搜索后我找不到这个问题，我也不明白为什么。我知道如果我使用以下行对其进行硬核，我可以获得文本元素:

document.querySelector("#selectiona1").textContent

但不包括:

$("#selectiona1").textContent

这两个有什么区别？我读到 textContent 是 DOM 的一部分，据我了解它与对象相关，根据我的控制台，我认为它是一个对象。我做了一些疯狂的尝试，比如将我得到的对象放入 querySelector 中，但没有任何效果。

Answer 1

用这一行:

var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");

您正在使用 jQuery 选择 #custDropDownMenuA 内的 .dropdown-item.active，当您使用 jQuery 选择时，您获取 jQuery 对象作为响应。因此，addedWorkout 是一个 jQuery 对象，而 jQuery 对象通常不具有与标准 HTMLElement 相同的属性/方法。 (querySelector 是检索元素的普通 Javascript 方法)

选择 jQuery 集合中的第 [0] 项来获取第一个匹配元素:

var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active")[0];

或者使用jQuery方法获取第一个匹配元素的文本，即.text():

var addedWorkoutText = addedWorkout.text();

(请注意新变量的使用 - 如果可能的话，您可能会发现创建新变量而不是重新分配旧变量时更容易阅读和调试代码)