javascript - 为什么我的 jQuery .each 迭代无法使用每个项目的属性？

Question

我有一些代码可以从表单中的每个子项中查找“标题”属性。

当我运行“console.log('title')”时，它会正确地提取标题。但是，当我尝试应用代码在字段集的内部 div 之前插入标签时，它只是向每个字段添加相同的标题(“关于我”)。

html

<form action="#" method="post">
    <fieldset title="About Me">
        <!-- Going to convert legends to h4 // can choose the header style element? -->
        <div>
            <label for="name">Text Input:</label>
            <input type="text" name="name" id="name" value="" tabindex="1" />
        </div>
    </fieldset>

    <fieldset title="Radio Button Choice">
        <div>

            <label for="radio-choice-1">Choice 1</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

            <label for="radio-choice-2">Choice 2</label>
            <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
        </div>
    </fieldset>

    <fieldset>
        <div>
            <label for="select-choice">Select Dropdown Choice:</label>
            <select name="select-choice" id="select-choice">
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
            </select>
        </div>
    </fieldset>
</form>

jQ

kids = this.element.children('fieldset');
 kids.each(function(){ //function to do something to each of the child fieldset elements
 console.log(this);

 title = $(this).attr('title');

console.log(title); //this logs each title fine, or 'undefined' where there isn't one
$("<legend>" + title + "</legend>").insertBefore('div:first-child')
//that's where I'm just getting 'About me', on every damn one....
 });

谁能看出我哪里傻了？谢谢。

Answer 1

您的选择器太通用 - div:first-child 将选择所有 div。查找 this 字段集的后代 div。

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

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

此外，请确保使用 var 关键字将 title 设为局部变量:

var title = $(this).attr('title');