Question

我有这个HTML：

<fieldset style="display: block;" title="Producto" class="fstep" id="product-create-step-2">
    <section>
        <div class="p_name">
            <input type="text" maxlength="50" required="required" name="product[name]" id="product_name">
        </div>
        <div class="p_description">
            <textarea required="required" name="product[description]" id="product_description"></textarea>
        </div>
        <div class="p_age">
            <input type="text" value="0" name="product[age_limit]" id="product_age_limit">
        </div>
    </section>
</fieldset>

我正在尝试使用required="required"显示空值的每个元素的警报，所以我这样做了：

$('#product-create-step-2 > input[required="required"]').each(function() {
    if (!$.trim(this.value).length) {
        alert($(this).prev('label').text() + ' can't be empty!!!');
        valid = false;
    }
});

如果我将#product_name或#product_description留空，它永远不会显示警报而我找不到我想念的任何建议？

Answer 1

>用于选择直接后代。

你想要这个：

$('#product-create-step-2 input[required="required"]')

无论嵌套有多深，都会在#product-create-step-2内找到所有匹配的输入。

此外，这将导致语法错误：

' can't be empty!!!'

您需要转义单引号或切换报价：

' can\'t be empty!!!'

或（我的偏好）：

"can't be empty"

Answer 2

您的元素不是#product-create-step-2的直接子元素，因此您不应包含>。只需在两个选择器之间留出空格，您就可以在#product-create-step-2内的任何位置获得所有元素。

$('#product-create-step-2 input[required="required"]')

Answer 3

第一个选择器下方有无输入。

尝试将选择器更改为：

$('#product-create-step-2 > section > div > input[required="required"]')

甚至只是

$('#product-create-step-2 input[required="required"]')

Answer 4

不，更仔细地查看DOM，查询应该是：

$('#product-create-step-2 input[required="required"]').each ...

或：

$('#product-create-step-2 > section > div > input[required="required"]').each ...

因为>选择了父母的直接子元素。

这个jQuery代码不应该返回＃product-create-2中的所有输入吗？

4 个答案: