Question

我正在使用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'));   
});

我对那些下一个（）感到很失落。等等我哪里错了？

BR，托比

Answer 1

问题是next()只会在搜索中出现问题。您可以使用prev()向后或向上查看。或者在您的情况下，siblings()会向两个方向展示。

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

所以你可能想尝试：

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

要测试一下，进入开发人员视图会很有帮助。如果您使用的是Firefox，则可以通过右键单击页面并选择Inspect Element with Firebug来查看Firebug。然后转到Console标签。在控制台底部输入您的jQuery select语句，然后按Enter键。这将在控制台中显示它选择的内容。在您的情况下，this将无法在控制台中运行，因为它只会指向jQuery（），因此您需要在id字段中添加input属性并根据这些属性进行搜索。有这样的事情：

$('#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>

Answer 2

如果您尝试遍历该代码中的第二个div，则只需要一个parent()，而不是两个parent()。第二个{{1}}电话会更高一级。

jquery this.next验证

2 个答案: