1

コンテナをループして、存在する可能性のある要素を探しています。要素の 1 つが存在する場合、要素の jQuery オブジェクトを変数に割り当てたいと思います。解決策はありますが、それが良い方法かどうかはわかりません。

HTML

<form>
<div>
    <label>First name</label>
    <input type="text"/>
</div>

<div>
    <label>last name</label>
    <input type="text"/>
</div>

<div>
    <label>location</label>
    <select>
        <option>USA</option>
    </select>
</div>
</form>

JS

$(document).ready(function(){
var testNum = $('form').find('label').length;
for(var i=0; i<testNum; i++) {
    var currentTest = $('form').find('label').eq(i).parent().find('input').length ? $('form').find('label').eq(i) : false || $('form').find('label').eq(i).parent().find('select').length ? $('form').find('label').eq(i) : false;
    $('html').append(currentTest.text() + '<br/>');
}
});

編集：更新されたフィドルと問題

http://jsfiddle.net/PMtZB/1/

4

2 に答える 2

2

あなたがループしている方法は非効率的です。.each()次のように、メソッドを使用する必要があります。

$('form').find('label').each(function() {
    var $label = $(this); // $label is a jQuery object that refers to the label element.


    ...
});

あなたがやっている方法では.find()、同じセレクターを繰り返し呼び出しています。

質問が編集された後の更新:

最初に 2 つのこと:

  1. コードだけでなく、どんな要素が欲しいのかを言葉で述べていただけると助かります。anまたは a のいずれかが後に続くすべての<label>要素が必要であると仮定します。<input><select>
  2. 括弧を使用する必要があります。調べてみたら、論理和演算子は条件演算子よりも優先順位が高く、条件演算子は右から左への結合性があります。ステートメントが次のようになるように、括弧を追加する必要があると思います(c1 ? a1 : a2) || (c2 ? b1 : b2)。括弧がないと、 と同等になりc1 ? a1 : ((a2 || c2) ? b1 : b2)ます。

KD が提案したものに追加して、jQuery でラップされたセットを連結してみることができます。

$(document).ready(function() {

    var $matchingLabels = $();

    $('form').find('label').each(function() {
        var $label = $(this);
        if ($label.next().is('input, select')) {
            $matchingLabels.add($label);
        }
    });

    // At this point $matchingLabels holds the labels you want.
});

「前 + 次」セレクターを使用することもできます。

$(document).ready(function() {

    var $matchingLabels = $('form').find('label + input, label + select').prev();

});

もちろん、<input>and<select>要素が常に要素の直後に続くと想定できない場合<label>は、最初のオプションを使用して if ステートメントを変更する必要があります。

于 2013-03-01T17:45:46.333 に答える
1 
$(document).ready(function(){
    var testNum = $('form').find('label').length;

    $('form').find('label').each(function(){
        if($(this).next().is("input") || $(this).next().is("select"))
        {
           $('html').append($(this).text() + '<br/>');
        }
    });

});

このコードをフィドルに貼り付けてテストします..

于 2013-03-01T17:39:20.127 に答える