Question

我正在寻找更多的succint和更多jQuery-e方式来做到以下几点。我有一个对象lbl，它是一个div。 div中包含的是span标记，它是firstName对象的lastName和lbl属性。所以，到目前为止，我们有以下HTML：

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

现在考虑以下小提琴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);
            });

请参考小提琴的行为。我需要能够控制父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中找到东西。

jQuery对象，其中属性是DOM元素

1 个答案: