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 を選択します。thisfieldsetの子孫である div を探します。

// 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)代わりに使用することに関しては、jQueryソースで確認する必要がありますが、おそらく内部でネイティブDOMを使用.find('div:first-child')しているのに、セレクターの解析が含まれるため、後者の使用は遅くなる可能性があります。にaを渡すと、最初の子が返されます。.children(0).childNodes0

.find('div:fist-child')一部のページでフィールドセットの最初の子がdiv要素ではなく、最初の子の前ではなく最初のdivの前に凡例を挿入したい場合は、使用する方がよい状況が1つあります。その場合、を使用.findすると最初のdivが返されます。

insertBeforeよりもprependを使用する理由については、どちらも優れており（Dennisの回答からわかるように）、状況に応じて使用できます。セレクターの書き方は選択の問題です。この場合、私は自分の道をよりきれいに見つけます。

kidsPSこの例では、フィールドセット用のセレクターに置き換えました。気にしないでください。

于 2012-08-10T11:13:08.387 に答える
1

.prepend() は、あなたがしようとしていることをしているようです:

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

また、DOM オブジェクトを jQuery オブジェクトに昇格させる必要はありません$(this).attr('title'):)のように DOM 属性にアクセスするだけです。

于 2012-08-10T11:23:16.723 に答える