Question

我在HTML文档中有多个div，其中包含较小的div，可以相互排序。加载文档时，随机数量的较小div将附加到#boxtop。

这是我的HTML：

<html>
<body>
<head>
    <title></title>
    <script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <link rel = "stylesheet" type" type="text/css" href = "style.css">
    <script src="jquery-ui.min.js"></script>
    <div id = "boxtop" class = "dragInto"></div>
    <button type="button" id="button">My Children!!!</button>
    <div id = "eqbox"></div>
    <div id = "box1" class = "ansBox"></div>
    <div id = "box2" class = "ansBox"></div>
    <div id = "box3" class = "ansBox"></div>
</head>
</body>
</html>

这是我的相关jQuery

$(document).ready(function()
{
    $("#boxtop").sortable
    ({
        connectWith: ".ansBox"          
    });

    $(".ansBox").sortable
    ({
        connectWith: ".ansBox"          
    });

});

$(document).ready(function()
{
    $("dragInto").droppable
    ({
        accept: ".box"
    });
});

var numChild = $("#boxtop").length;
$(document).ready(function()
{
    $("#button").click(function() 
    {
        console.log(numChild);
    });
});

我的问题是：如何获得排序div中的元素数量。我目前尝试使用numChild将该值打印到控制台，但打印“1”。如果我要将#boxtop中的一堆元素拖到.box1，我怎样才能获得.box1中的元素数量？

Answer 1

.length属性告诉您有多少元素属于您调用它的jQuery对象。因此，$("#boxtop")匹配一个元素，$("#boxtop").length将为1。

要了解#boxtop内的元素数量，您必须选择其所有后代，然后检查.length：

// All descendants:
$("#boxtop").find("*").length    // or:
$("#boxtop *").length

// Or count immediate children only:
$("#boxtop").children().length

在你的情况下，我认为检查直系孩子可能是你想要的。但是不要设置像：

这样的全局变量

var numChild = $("#boxtop").children().length;

...因为在用户开始与之交互之前，将numChild设置为页面首次打开时的长度。您需要在需要值的位置检查$("#boxtop").children().length或$(".box1").children().length。

顺便说一下，你不需要三个独立的$(document).ready(...)处理程序：将你的所有代码组合成一个就绪处理程序，或者如果你将<script>元素放在正文的末尾你根本不需要现成的处理程序。

Answer 2

您需要从update实例中捕获stop或sortable事件。正好在那里的详细文件

Live Demo And Working Code

如何计算可排序div中的元素数量？

2 个答案: