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

Shouldn't this jQuery code return all inputs inside #product-create-2?

本文关键字：输入 代码 jQuery 不应该 返回 #product-create-2 这个      更新时间：2023-09-26

我有这个 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空，它永远不会显示警报，我找不到我错过的东西，有什么建议吗？

>用于选择直系后代。

你想要这个：

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

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

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

' can't be empty!!!'

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

' can''t be empty!!!'

或（我的偏好）：

"can't be empty"

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

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

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

尝试将选择器更改为：

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

甚至只是 

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

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

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

或：

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

因为>选择的元素是父级的直接子级。

相关文章：