Question

I have some code that’s finding the ‘title’ attribute from each child in a form.

It pulls out the title just correctly when I run ‘console.log(‘title’). But when i try to apply the code to insert a label before the inner div of the fieldset, it just adds the same title (‘About Me’) to each of them.

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....
 });

Can anyone spot where I’m being a fool? Thanks.

Answer 1

Your selector is too generic – div:first-child will select all of the divs. Look for the div that is a descendant of this fieldset.

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

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

Also, make sure you make title a local variable with the var keyword:

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