0

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

当我运行'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....
 });

谁能发现我在哪里是个傻瓜？谢谢。

4

3 回答 3

3

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

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

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

另外，请确保使用关键字创建title一个局部变量：var

var title = $(this).attr('title');
于 2012-08-10T11:10:14.030 回答
2

丹尼斯击败了我，无论如何这里的工作示例与选择第一个孩子的方法略有不同http://jsfiddle.net/gMb8m/1/

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

编辑：解决一些 OP 问题。

至于使用.children(0)而不是.find('div:first-child')- 我必须检查 jQuery 源代码，但我想使用后者可能会更慢，因为它使用涉及解析选择器，而.children(0)可能在内部使用本机 DOM .childNodes。将 a 传递0给它只会返回第一个孩子。

如果在某些页面上第一个子元素不是元素并且您仍然希望在第一个 div 之前而不是在第一个子元素之前插入图例，则使用.find('div:fist-child')会更好的一种情况。div在这种情况下 using.find将返回第一个 div。

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

PS 在示例中，我kids用我的字段集选择器替换了你的 - 不要介意。

于 2012-08-10T11:13:08.387 回答
1

.prepend() 似乎做了你想做的事：

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

此外，无需将 DOM 对象提升为 jQuery 对象，就像访问 DOM 属性一样$(this).attr('title')：)

于 2012-08-10T11:23:16.723 回答