0

次のような状況があります。

フォームには、クラス "formFieldLabel" 内にシステム生成フィールドがあります (これは、from ジェネレーターで生成されたフォームです)。これはラベル タグを使用していないため、スクリーン リーダーに適していません。私の目標は、基本的にテーマを設定し、このシステムによって生成されるフォームをよりアクセスしやすくすることです。したがって、このスクリプトでの私の試みは...

1) フォームをループし、.formFieldLabel の内容を配列 "labelArray" にコピーします。

2) この後、input タグの隣の label タグ内に適切な配列値を貼り付けます。

3) 最後に、.formFielLabel クラスを削除します。これはまだ完了していませんが、この部分は簡単に実行できます。

// HTML example for one part of the multiple fields
 <div class="formField">
    <table>
    <tr>
        <td class="formFieldLabel"                          >First Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
        <td class="formFieldLabel" style="padding-left: 5px">Last Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
    </tr>
    <tr>
        <td                          ><input type="text" class="l6e formFieldText formFieldMediumLeft"  id="form_0004_fld_2_fn" name="First Name" value=""></td>
        <td style="padding-left: 5px"><input type="text" class="l6e formFieldText formFieldMediumRight" id="form_0004_fld_2_ln" name="Last Name" value=""></td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr>
        <td class="formFieldLabel">Email Address<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
    </tr>
    <tr>
        <td colspan="2"><input type="Email" class="l6e formFieldText formFieldLarge" id="form_0004_fld_2_em" name="E-mail" value=""></td>
    </tr>
    </table>
</div>

これを行うためにこれまでに作成したスクリプトを次に示します。問題は、入力ごとにループ全体が実行されるため、各入力の横に FirstNameLastNameEmail などが表示されることです。ここで概念的に間違った方向に進んでいるように感じます。

// jQuery
var label = $(".formFieldLabel");
var labelArray = [];
for(var i=0;i < label.length; i++) {
  var arrValue = label[i].innerHTML;
  labelArray.push(arrValue);
  insertLabel = $("<label>").append(labelArray[i]).append("</label>");
  $(".formFieldText").before(insertLabel);
};

JSFiddle: http://jsfiddle.net/qGgwT/

ここで誰かが私を正しい方向に向けることができますか?

4

1 に答える 1

1

試す

var label = $(".formFieldLabel");

label.contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text()).length > 0 ;
}).wrap('<label />')

デモ:フィドル

テキストをラップしたい場合*はlabel、

$(".formFieldLabel").wrapInner('<label />')

デモ:フィドル

于 2013-09-10T23:11:29.820 に答える