1

如何<li>, <div>, <p>, etc在 jquery 中检查最近的父元素是否是节点类型，即，或者是类名？

我做了下面的代码，但它不起作用：

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

如果要检查直接父元素，可以使用以下命令：

$parent = field.parent();
if ($parent.is('li, div, p, .className')) {
    $parent.addClass('error').find('.input').before(msgSpan);
}

或者，如果您想检查最近的元素：

$closest = field.closest('li, div, p, .className');
if ($closest.length) {
    // $closest[0].tagName (would give you the element type)
    // $closest[0].className (would give you the class, if one exists)
    $closest.addClass('error').find('.input').before(msgSpan);        
}
于 2013-04-24T09:46:41.257 回答
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元素的选择作为字段传递，因此代码仅适用于找到的第一个元素。（换句话说，您应该使用仅匹配一个元素的更具体的选择器）

就像是

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 回答