使用 jquery nearest() 和 find() 返回实际的 HTML 元素答案

【问题标题】：Using jquery closest() and find() to return the actual HTML element使用 jquery nearest() 和 find() 返回实际的 HTML 元素
【发布时间】：2020-09-22 12:54:20
【问题描述】：

我的 HTML 网页上有以下类型的元素。

<div class="form-group>
    <div class="car">
        <div class="carIventory carDescription" contenteditable="true">This is car # 1</div>
    </div>
    <div class="tool">
        <button>Select me!</button>
    </div>
</div>

根据一次显示的汽车数量，有很多。

当我点击按钮Select me! 时，我使用closest() 和find() 来获得最近的<div> 和carDescription 类。

使用以下代码将其写出控制台：

var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element);

产生这个：

jQuery.fn.init [div.carIventory.carDescription, prevObject: jQuery.fn.init(1)]

但如果我改用这段代码：

const $element = document.querySelector('.carDescription');
console.log("carDescription ", $element);

我得到了我想要的格式：

<div class="carIventory carDescription" contenteditable="true">This is car # 1</div>

有没有办法像querySelector() 那样使用closest() 和find() 返回实际的HTML 元素？

谢谢！

【问题讨论】：

您可以在 jQuery 中看到数组中的第一项是您的 DOM 元素，因此您可以使用 $element[0]
在您的 jquery 代码中，$element 是该元素的 jquery 表示，因此您会得到一个 jquery.nf.init。您可以使用 jquery，例如 console.log("carDescription ", $element.text());，也可以使用 $element[0] 将其转换为 DOM 节点，例如 console.log("carDescription ", $element[0].innerHTML); - 我个人会坚持使用 jquery（因此“类似”）
@freedomn-m 谢谢！ text() 确实向我显示了 <div> 的内容，如下所示：This is car # 1。但它并没有像我上面需要的格式那样向我显示实际的 HTML 元素。
如果你想要 DOM，为什么要使用 jQuery？
那么$lement[0].outerHTML?

标签： javascript jquery ecmascript-6

【解决方案1】：

您看到的是向您显示 DOM 元素的控制台。根据浏览器的调试器，它们输出不同的东西。在您的情况下，您看到的是一个 jQuery 对象，而不是对 DOM 的引用。

如果您希望使用.get(0) 或[0] 的DOM 来引用jQuery 的类似对象的数组中的DOM 元素。

var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.get(0));
console.log("carDescription ", $element[0]);

或者只是使用现代 DOM 方法并一起跳过 jQuery。

var element = document.querySelector(e.target).closest(".form-group").querySelector('.carDescription');
console.log(element);

【讨论】：

谢谢！第二个选项确实有效。我不知道你可以像这样组合querySelector() 和closest()。

【解决方案2】：

这样使用

var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.parent().html());

它将给出 HTML 输出。

【讨论】：

这和querySelector不一样.....字符串不是DOM元素......