来自 DOM 节点对象的 JQuery 对象上的 .children().innerHtml 返回 undefined

Question

function getTaskProperties(node) {
        var data = {};
        data.name = $(node).children(".nameHere").innerHtml;
        data.date = $(node).children(".dateHere").innerHtml;
        data.class = $(node).children(".classhere").innerHtml;
        console.log($(node).children(".nameHere")); // returns something like:
        //[p.nameHere, prevObject: n.fn.init[1], context: div#entryTemplate.entry, jquery: "1.11.0", constructor: function, selector: ""…]
        console.log($(node).children(".nameHere").innerHtml); //returns undefined
        return data;    }
    function getAllTasks() {
        var tasks = [];
        $(".entry") .each(function (i, e) {
            console.log (getTaskProperties(e));
        })
        for (var i; i<tasks.length; i++) {
            console.log(tasks[i]);
        }
    }

此脚本通过一系列 HTML 元素运行，如下所示：

<div class = "entry" id = "entryTemplate">
                <a class = "trashButton"><i class="fa fa-trash-o"></i></a>
                <p class = "classHere">History</p>
                <p class = "dateHere">Due: Monday</p>
                <p class = "nameHere">Graphic Organizer</p>
            </div>

还有一些

其他元素包含在 <.entry 的 JQuery 选择器中>

我的问题是当我运行$(node).children().innerHtml时它会返回undefined.如何正确获取.classHere、.nameHere和.dateHere的值？

Answer 1

.innerHTML是一个

DOM属性名称（你的大写错误

）。

$(node).children(".nameHere")生成一个 jQuery 对象。

.innerHTML不是jQuery对象的属性（它是DOM对象的属性），因此不适用于jQuery对象。

---

你可以使用所有jQuery：

$(node).children(".nameHere").html()

或者你可以从 jQuery 对象中获取 DOM 对象，然后使用 .innerHTML 如下所示：

$(node).children(".nameHere")[0].innerHTML

---

作为解释 - jQuery对象和DOM对象不是一回事。 它们是具有不同属性和方法的不同类型的对象。

jQuery对象包含一个DOM对象数组（在其内部）。 因此，当您想对 DOM 对象执行操作时，您可以使用 jQuery 方法将该方法应用于 jQuery 对象中的 DOM 对象，或者您可以从 jQuery 对象中获取 DOM 对象并将 DOM 方法/属性直接应用于 DOM 对象。

Answer 2

使用 .html（） 或 .text（）

$(node).children(".nameHere").html();

---

$(node).children(".nameHere") jQuery对象，你不能直接使用.innerHTML

---

你可以做

$(node).children(".nameHere")[0].innerHTML;

或 .get（）

$(node).children(".nameHere").get(0).innerHTML;