Javascript 属性为DOM元素的jQuery对象

我正在寻找一种更简洁、可能更jQuery-e的方法来完成以下工作。 我有一个对象

lbl

，它是一个div。div中包含一个span标记，它是

lbl

对象的

firstName

和

lastName

属性。到目前为止，我们有以下HTML：

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

约翰
雌鹿

现在考虑以下小提琴< /P>

$（'btnSubmit'）。单击（函数（）
{
var lbl=$（''）.addClass（'label'）；
//我需要能够访问父div的子元素
//通过点运算符
firstName=$（''）.text（'test1'）.addClass（'firstName'）；
lastName=$（''）.text（'test2'）.addClass（'lastName'）；
lbl.append（名字）；
lbl.append（lastName）；
lbl.firstName=firstName；
lbl.lastName=lastName；
$（'#page'）。追加（lbl）；
log（lbl.firstName.text（））；
//span标记从未添加到div中
变量lbl2=$（''）.addClass（'label'）；
lbl2.firstName=$（''）.text（'test2'）.addClass（'firstName'）；
$（'#page'）。追加（lbl2）；
});

---

行为请参考小提琴。我需要能够控制父div容器的子对象上的字体大小、边框等，

lbl

，并将其作为普通DOM元素显示在页面上。在第一个lbl控件附加到页面之前，所有JS都可以工作。不过我觉得这个很笨重。有没有更好的方法让DOM元素的子元素更容易/简洁地成为父对象的属性？

您要求使用更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());
});

$（'btnSubmit'）。单击（函数（）{
var lbl=$（''）.addClass（'label'）；
html（'test1test2'）；
$（'#page'）。追加（lbl）；
//然后，要检索该数据，您可以执行如下操作
log（lbl.find（“.firstName”）.text（）；
});

然后，只要您想从给定的标签div中获取firstName，就可以使用

.find（“firstName”）

获取该对象，然后获取其文本

---

最佳实践通常只使用DOM的结构并在DOM中查找所需的内容，而不是使用新的重复方式来访问所有内容。对于我们所做的99%，通过DOM访问东西的速度非常快，并且不需要创建和复制另一种访问数据的方式。而且，只要您有足够的id或类标记来标识您要查找的内容（您可以这样做），jQuery就可以很容易地在DOM中查找内容。

您不需要执行

lbl.firstName=firstName

，只需执行

lbl.children（'.firstName'）

获取

。为什么要将DOM对象作为DOM对象的属性？如果您不想让它在大多数时间都可见，那么将它作为子对象（在DOM中），然后将其隐藏起来就更常见了。或者，如果您不想让它可见，那么为什么还要有一个DOM对象呢。只需在

lbl

或

lbl2

上使用

.data（）

来存储所需的文本。@jfriend00在这种情况下，我希望对名称列表进行解析，以获得第一个和最后一个名称，并为每个名称创建一个类似于label类的div。我的想法是最好执行类似于

lbl.firstName

的操作，这样我就可以使用

firstName

类访问span标记。但这让我觉得这可能不是最好的想法。好吧，这很有意义。因此，我将

lbl.firstName

设置为具有类firstName的子span元素，而不是将DOM元素作为DOM元素的属性。是吗？我的印象是我可以做一些魔术，如果我做了，

lbl.firstName=$（''）.text（John Doe'）

它会神奇地工作……不用说它没有。@wootscoottinboogie-我根本不建议在

lbl

上使用自定义属性。这不是最佳做法。我建议，当您有一个

lbl

对象时，您只需在需要时在其中找到名字，而不需要单独存储访问它的方式。在属性中放置DOM引用有时也是内存泄漏的问题。如果您想在DOM对象上存储属性，jQuery建议您使用

.data（）

如

lbl.data（“firstName”，“whatever”），但我看不出有任何理由在这里使用它。当您需要名字时，只需在DOM中找到它并检索它。好的，现在就完全有意义了+1.
$('#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());
});