jquery this.next validation

我在使用jquery this.next函数时遇到了一个小问题。

我想验证，这样它就会发出一条消息，比如空字段等。

这是html:

<div style="float: left; width: 50px;"><input class="network" type="checkbox" name="netW[]" value="PC1" id="PC1" /></div>
    <div style="float: left; width: 350px;"><span>PC1</span><br /><span class="networkRole">
        <div style="margin-left: 10px; color: red;">
            <input class="NRoles" type="checkbox" name="networkRoles[PC1][]" value="CE" />CE</div>
                <div style="margin-left: 20px; color: #000;"><div style="width: 50px; margin-left: 20px;" class="readwrite"><input type="checkbox" name="rw[PC1][CE][]" value="Read" class="checkRW" /><span style="margin-left: 10px;">Read</span></div>
                <div style="width: 50px; margin-left: 20px;" class="readwrite"><input type="checkbox" name="rw[PC1][CE][]" value="Write" class="checkRW" /><span style="margin-left: 10px;">Write</span></div>
                </div>

这里是目前不起作用的jquery：

(".checkRW").click(function(){
alert ($(this).parent().next().children('.checkRW'));   
});

我有点迷上了那些next（）。等我哪里错了？

Br，Toby

问题是next()只在搜索中出现。您可以使用prev()进行回顾或向上查看。或者，在您的情况下，siblings()将双向查看。

您可能还想在语句末尾添加一个.val()，以便alert具有一些可读文本。

所以你可能想试试：

$(this).parent().siblings().children('.checkRW').val()

要进行测试，进入开发人员视图是很有帮助的。如果你在Firefox上，你可以右键点击页面并选择Inspect Element with Firebug来查看Firebug。然后转到Console选项卡。在控制台底部键入jQuery select语句，然后点击Enter。这将在控制台中显示它所选择的内容。在您的情况下，this将无法在控制台中工作，因为它只指向jQuery（），因此您需要向input字段添加一个id属性，并基于这些属性进行搜索。像这样的东西：

$('#1').parent().siblings().children('.checkRW').val()

这是你建议我用来测试的一个版本。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div style="float: left; width: 50px;">
        <input class="network" type="checkbox" name="netW[]" value="PC1" id="PC1" />
    </div>
    <div style="float: left; width: 350px;">
        <span>PC1</span><br />
        <div class="networkRole">
            <div style="margin-left: 10px; color: red;">
                <input class="NRoles" type="checkbox" name="networkRoles[PC1][]" value="CE" />CE
            </div>
            <div style="margin-left: 20px; color: #000;">
                <div style="width: 50px; margin-left: 20px;" class="readwrite">
                    <input id="1" type="checkbox" name="rw[PC1][CE][]" value="Read" class="checkRW" />
                    <span style="""margin-left: 10px;">Read</span>
                </div>
                <div style="width: 50px; margin-left: 20px;" class="readwrite">
                    <input id="2" type="checkbox" name="rw[PC1][CE][]" value="Write" class="checkRW" />
                    <span style="""margin-left: 10px;">Write</span>
                </div>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $( document ).ready( function() {
        $(".checkRW").click(function(){
            alert ($(this).parent().siblings().children('.checkRW').val());   
        });
    });
    </script>
</body>
</html>

如果您试图遍历到该代码中的第二个div，则只需要一个parent()，而不需要两个。第二个parent()调用将提升一个级别。

相关内容

最新更新

热门标签：