javascript - 属性为 DOM 元素的 jQuery 对象

Question

我正在寻找一种更简洁且可能更 jQuery-e 的方式来执行以下操作。我有一个对象 lbl，它是一个 div。 div 中包含一个 span 标记，它是 lbl 对象的 firstName 和 lastName 属性。所以，到目前为止，我们有以下 HTML:

<div class="label">
        <span class="firstName">John</span>
         <span class="lastName">Doe</span>
</div>

现在考虑以下 fiddle http://jsfiddle.net/VfErV/

 $('#btnSubmit').click(function ()
            {
                var lbl = $('<div>').addClass('label');
                //I need to be able to access the child elements of the parent div
                //via the dot operator
                firstName = $('<span>').text('test1').addClass('firstName');
                lastName = $('<span>').text('test2').addClass('lastName');
                lbl.append(firstName);
                lbl.append(lastName);
                lbl.firstName = firstName;
                lbl.lastName = lastName;

                $('#page').append(lbl);
                console.log(lbl.firstName.text());

                //span tag is never added to the div
                var lbl2 = $('<div>').addClass('label');
                lbl2.firstName = $('<span>').text('test2').addClass('firstName');
                $('#page').append(lbl2);
            });

行为请引用 fiddle 。我需要能够控制父 div 容器 lbl 的子对象的字体大小、边框等，并使它们作为普通 DOM 元素出现在页面上。在第一个 lbl 控件附加到页面之前的所有 JS 都有效。不过，这对我来说看起来很笨重。有没有更好的方法让 DOM 元素的子元素更容易/更简洁地成为父对象的属性？

Answer 1

您要求使用更像 jQuery 的方式来执行此操作。以下是创建结构的方法:

$('#btnSubmit').click(function () {
    var lbl = $('<div>').addClass('label');
    lbl.html('<span class="firstName">test1</span><span class="lastName">test2</span>');
    $('#page').append(lbl);

    // Then, to retrieve that data, you can just do something like this
    console.log(lbl.find(".firstName").text());
});

然后，只要您想从给定的标签 div 中获取 firstName，只需使用 .find("firstName") 获取该对象，然后获取其文本。

最佳实践通常只使用 DOM 的结构并根据需要在 DOM 中查找内容，而不是创建新的重复方法来访问所有内容。对于我们所做的 99% 的事情，通过 DOM 访问事物非常快，并且不需要创建和复制另一种获取数据的方式。而且，只要您有足够的 id 或类标记来标识您要查找的内容(您正在查找)，jQuery 就可以非常轻松地在 DOM 中查找内容。