1

jqueryで、最も近い親要素がノードのタイプ、つまり<li>, <div>, <p>, etcクラス名であるかどうかを確認するにはどうすればよいですか?

以下のコードを作成しましたが、動作しません。

var msgSpan = $('<span/>', {class: 'msg'});

function checkField(field) {
    if (field.closest('li')) {
        console.log('Parent is an Li');
        field.closest('li').addClass('error').find('.input').before(msgSpan);
    } else if (field.closest('.parent')) {
        console.log('Parent is a class called .parent');
        field.closest('.parent').addClass('error').find('.input').before(msgSpan);
    }
}

// Usage
checkField($('input[type="text"]');

HTML:

<form id="search-jobs">
    <fieldset class="parent">
        <label for="jobs_search">Search jobs</label>
        <div class="input left">
            <input type="text" id="jobs_search" name="jobs_search" class="required" placeholder="Search jobs" />
        </div>
        <div class="btn-cont left">
            <input type="submit" id="" name="" class="button" value="Search" />
        </div>
    </fieldset>
</form>

どうもありがとう

4

3 に答える 3

0

タグの型チェックを行わなくても、これを実現できる場合があります。

var msgSpan = "<div>Error</div>";
function checkField(field) {
    var $parent = (field.parents(".parent").length) ? field.parents(".parent"): field.parents("li");
    if($parent.length){
        $parent.addClass('error').find('input').before(msgSpan);
    }
}

checkField($("#jobs_search"));

作業例 http://jsfiddle.net/kg3Nq/2/

于 2013-04-24T09:46:49.710 に答える
-1

.is()メソッドを使用する

var msgSpan = $('<span/>', {class: 'msg'});

function checkField(field) {
    var parent = field.parent();

    if (parent.is('li')) {
        console.log('Parent is an Li');
        parent.addClass('error').find('.input').before(msgSpan);
    } else if (parent.is('.parent')) {
        console.log('Parent is a class called .parent');
        parent.addClass('error').find('.input').before(msgSpan);
    }
}

// Usage
checkField( $('input[type="text"]') );

ただし、複数の要素に一致する可能性のある選択をフィールドとして渡すためinput、コードは最初に見つかったものでのみ機能することに注意してください.. (つまり、1 つの要素のみに一致するより具体的なセレクターを使用する必要があります) 。

何かのようなもの

checkField( $('input[type="text"]').first() );

さらに、両方のケースで同じコードを実行しているようです (ログ メッセージを除く)。それが意図された動作である場合は、単一のチェックを使用できます

function checkField(field) {
    var parent = field.parent();

    if (parent.is('li') || parent.is('.parent')) {
        parent.addClass('error').find('.input').before(msgSpan);
    }
}
于 2013-04-24T09:52:42.990 に答える