0

我正在寻找一种更简洁且可能更 jQuery-e 的方式来执行以下操作。我有lbl一个 div 对象。div 中包含一个 span 标签，它是对象的firstNameandlastName属性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 元素的子元素更容易/更简洁地成为父对象的属性？

4

1 回答 1

2

您要求使用更多 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 中查找内容。

于 2013-09-18T17:58:29.740 回答