Javascript 为什么我的jQuery.每次迭代都无法使用每个项的属性？

我有一些代码可以从表单中的每个子级中查找“title”属性

当我运行“console.log（'title'）时，它正确地拉出了标题。但是，当我尝试应用代码在字段集的内部div之前插入标签时，它只是将相同的标题（“关于我”）添加到每个字段集

html

文本输入：
选择1
选择2
选择下拉选项：
选择1
选择2
选择3

jQ

childs=this.element.children（'fieldset'）；
each（function（）{//function对每个子字段集元素执行某些操作
console.log（this）；
title=$（this.attr（'title'）；
console.log（title）；//这会记录每个标题，如果没有，则记录为“未定义”
$（“+title+”）.insertBefore（'div:first child'））
//这就是我对每一件该死的事情都有“自我感觉”的地方。。。。
});

---

有人能看出我是个傻瓜吗？谢谢。

您的选择器太通用了-

div:first child

将选择所有div。查找作为此字段集的后代的div

// Based on your existing code
$("<legend>" + title + "</legend>").insertBefore($(this).find('div:first-child'));

// Slightly cleaner
 $(this).prepend("<legend>" + title + "</legend>")

---

您的选择器太通用-

div:first child

将选择所有div。查找作为此字段集的后代的div

// Based on your existing code
$("<legend>" + title + "</legend>").insertBefore($(this).find('div:first-child'));

// Slightly cleaner
 $(this).prepend("<legend>" + title + "</legend>")

---

丹尼斯抢在我前面，无论如何，这里有一个选择第一个孩子的方法略有不同的工作示例

问题是您使用了错误的选择器

编辑： 来解决一些问题

至于使用

.children（0）

而不是

.find（'div:first child'）

——我必须检查jQuery源代码，但我认为使用后者可能会比较慢，因为它使用的是解析选择器，而

.children（0）

可能在内部使用本机DOM

.childNodes

。将

0

传递给它只会返回第一个子级

使用

.find（'div:first child'）

的一种情况会更好，如果在某些页面上，fieldset first child不是

div

元素，并且您仍然希望在第一个div之前而不是在第一个子级之前插入图例。在这种情况下，使用

.find

将返回第一个div

至于为什么要使用prepend而不是insertBefore，它们都很好（从Dennis的回答中可以看出），并且可以在您的情况下使用。如何编写选择器只是选择的问题。在这种情况下，我发现我的方式更干净

---

另外，在这个例子中，我用我的字段集选择器替换了你的

孩子们

，别介意。

丹尼斯比我抢先一步，无论如何，这是一个工作示例，在选择第一个孩子的方法上略有不同

问题是您使用了错误的选择器

编辑： 来解决一些问题

至于使用

.children（0）

而不是

.find（'div:first child'）

——我必须检查jQuery源代码，但我认为使用后者可能会比较慢，因为它使用的是解析选择器，而

.children（0）

可能在内部使用本机DOM

.childNodes

。将

0

传递给它只会返回第一个子级

使用

.find（'div:first child'）

的一种情况会更好，如果在某些页面上，fieldset first child不是

div

元素，并且您仍然希望在第一个div之前而不是在第一个子级之前插入图例。在这种情况下，使用

.find

将返回第一个div

至于为什么要使用prepend而不是insertBefore，它们都很好（从Dennis的回答中可以看出），并且可以在您的情况下使用。如何编写选择器只是选择的问题。在这种情况下，我发现我的方式更干净

另外，在本例中，我用我的字段集选择器替换了您的

孩子们

——别介意。

.prepend（）似乎可以满足您的要求：

$('fieldset').each(function() {
    $(this).find('div:first-child').prepend('<legend>' + this.title + '</legend>');
});

$（'fieldset'）。每个（函数（）{
$（this.find（'div:first child'）.prepend（''+this.title+''）；
});

此外，无需将DOM对象升级为jQuery对象，因为只需访问

$（this）.attr（'title'）

：）

中的DOM属性即可。prepend（）似乎可以实现以下目的：

$('fieldset').each(function() {
    $(this).find('div:first-child').prepend('<legend>' + this.title + '</legend>');
});

$（'fieldset'）。每个（函数（）{
$（this.find（'div:first child'）.prepend（''+this.title+''）；
});

---

此外，无需将DOM对象升级为jQuery对象，因为只需访问

$（this）中的DOM属性即可。attr（'title'）

：）

全局变量不好，在

函数中声明
title
变量时，请使用
var
关键字。each（）

函数使用前缀。那可能行得通。我还没有测试过，但在我看来它可能会工作。全局变量不好，在

函数中声明
标题
变量时，请使用
var
关键字。each（）
函数。请使用prepend。那可能行得通。我还没有测试过这个，但在我看来它可能会工作。太棒了。谢谢对JS来说，我是个新手，很容易对它的工作方式感到迷茫。你帮我省去了一些麻烦你忘了在
prepend
示例中选择$（this）的第一个子项。@WTK你不需要这样做。只需在
之前插入
，但由于我正在执行
预编
，它将直接将其附加到
字段集
。谢谢对JS来说，我是个新手，很容易对它的工作方式感到迷茫。你帮我省去了一些麻烦你忘了在
prepend
示例中选择$（this）的第一个子项。@WTK你不需要这样做。只需要在
之前插入
，但由于我正在执行
前置操作
，它将直接将其附加到
字段集
。谢谢你的邀请！关于为什么的快速问题：为什么在这里
$('fieldset').each(function() {
    $(this).find('div:first-child').prepend('<legend>' + this.title + '</legend>');
});