Question

我正在尝试使用.siblings（[selector]）方法查找所有同级元素。尽管我不确定应该如何编写选择器方法，或者我当前的选择器方法在哪里出错。

我有html：

<div>
    <div>
        <label for="username">Username</label>
        <input class="username" type="text" placeholder="Username" id="username"/>
    </div>

    <div>
        <label for="Password">Password</label>
        <input class="password" type="password" placeholder="Password" id="password"/>
    </div>

    <div>
        <button id="login">Login</button>
    </div>
</div>

单击按钮时，如果未输入用户名或密码字段，我想向未填写的元素添加一个类。单击按钮后，脚本将运行：

if (username not entered) {

    jQuery(this).parent('div').siblings(function (a) {
        if (a.children('input').length > 0 && a.children('input')[0].hasClass('username'))
            return true;
        else return false;
    }).addClass('input-empty');

}

但是，此jQuery调用既返回包含用户名字段的div，也返回包含密码字段的div。如果我已指定必须包含带有“用户名”类的输入标签，为什么它会返回密码字段？

Answer 1

看the documentation：

.siblings( [selector ] )

该方法接受一个参数，该参数是可选的，并且是选择器。

选择器
  类型：选择器
  包含选择器表达式以匹配元素的字符串。

如果传递选择器，则它必须是 string 。

jQuery(this).parent('div').siblings(function (a) {

您正在传递函数，它不是字符串。

使用the :has() psuedo-class选择具有特定后代的元素。

如何在jQuery .siblings（）中编写选择器函数

1 个答案: