Question

我正在尝试编写一小段jQuery来验证我的输入字段。如果他们没有验证我想向空<p>标记写一条错误消息，那么我似乎无法正确定位它。任何人都可以看到/解释我出错的地方吗？

$(".nextform").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).find('p.feedback').html('error');
    }
});

<div>
    <li><input type="text" /><br /></li>
    <li><input type="text" /><br /></li>
    <li><input type="text" /><br /></li>
    <li><p class="feedback"></p>
    <input type="submit" value="next" class="next" /></li>
</div>

Answer 1

$(".next").click(function() {
    var empty = $(this).parent().parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).prev('p.feedback').html('error');
    }
});

我找不到.nextform而只是.next，并且应该使用$(this).parent().parent()，因为点击目标位于li

Answer 2

你应该使用prev（）

$(".nextform").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).prev('p.feedback').html('error');
    }
});

因为find（）查找后代

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

Answer 3

新小提琴：http://jsfiddle.net/kmendes/xG2KS/32/

这就是代码的样子：

$(".next").click(function() {
    var found = $(this).parents("div").find("li input").filter(function() {
        return this.value === "";
    });
    if(found.length) {
        $(this).parent().find('p.feedback').html('error');
    }
});

Answer 4

$(".next").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).parent().find('p.feedback').html('error');
    }
});

Answer 5

在您的示例HTML中，没有类.nextform的元素。尝试选择"input.next"，或者，如果您想更具体，请选择"input[type=submit].next"。
<li>应始终位于<ul>或<ol>内。
<input>只有type="submit"，如果它们在表单中并用于提交该表单。如果不是，请给他们type="button"。
使用.closest查找特定类型的最近祖先，例如：$(this).closest("div")。
最好尽可能明确，所以请使用：if (empty.length > 0) { ... }

http://jsfiddle.net/PPvG/xG2KS/38/

$("input.next").click(function() {
    var parent = $(this).closest('div');
    var empty = parent.find("input[type=text]").filter(function() {
        return this.value === "";
    });
    var feedback = parent.find('p.feedback');
    if (empty.length > 0) {
        feedback.text('error');
    } else {
        feedback.text('');        
    }
});

<div>
    <ul>
        <li><input type="text" /><br /></li>
        <li><input type="text" /><br /></li>
        <li><input type="text" /><br /></li>
        <li>
            <p class="feedback"></p>
            <input type="button" value="next" class="next" />
        </li>
    </ul>
</div>

在div中查找元素并使用jQuery添加文本

5 个答案: