这个jQuery代码不应该返回#Product-Cre-2中的所有输入吗？

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"]')