如何计算某个类有多少元素答案

【问题标题】：how to count how many elements have a certain class如何计算某个类有多少元素
【发布时间】：2015-07-10 22:32:44
【问题描述】：

我正在使用 jQuery 来尝试查找哪些 ID 具有特定的类名。这对我很重要的原因是我正在使用jQuery的toggleclass（）来显示和隐藏某些div以及选择按钮时，我希望视口显示或隐藏。我有两个个人目标：一个是找到一种在 jquery 中执行此操作的方法，另一个是了解如何在 javascript 中执行此操作。我知道 javascript 会更高级，我已经准备好了。

如何使用 resetViewport() 计算“选定”类的数量？
有没有更好的方法来做到这一点？
在 javascript 中，如何做同样的事情？即使你告诉我 js 中的具体方法也没关系。我不是要求确切的代码。我只是想学习。

毫无疑问，我添加了代码。让我们先看看我的个人托管网页CodeAmend，这是代码

****html***

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Code Player</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <div id="wrapper">

        <div id="header">
            <p>CodePlayer</p>
            <nav>
                <ul>
                    <li id="html-button" class="toggle selected no-highlight">HTML</li>
                    <li id="css-button" class="toggle selected no-highlight">CSS</li>
                    <li id="js-button" class="toggle selected no-highlight">JS</li>
                    <li id="result-button" class="toggle selected no-highlight">Result</li>
                </ul>
            </nav>
            <div id="run-button" class="no-select">Run</div>
        </div>

        <div id="html-container" class="code-container">
            <div class="code-label">HTML</div>
            <textarea>Code</textarea>
        </div>
        <div id="css-container" class="code-container">
            <div class="code-label">CSS</div>
            <textarea>Code</textarea>
        </div>
        <div id="js-container" class="code-container">
            <div class="code-label">JS</div>
            <textarea>Code</textarea>
        </div>
        <div id="result-container" class="code-container">
            <div class="code-label">Result</div>
            <iframe>Code</iframe>
        </div>



    </div>

    <script type="text/javascript" src="script.js"></script>
</body>

</html>

* 这里是 javascript / jquery *

 $("[id^=button]").click(function () {
    $(this).toggleClass('selected');
    // creates the name of a viewport ID. "view-" + html of button
    var viewID = "#view-" + $(this).html();
    $(viewID).toggle();
    resetViewport(4);
});

function resetViewport(numberOfViewports) {
    var viewSize;
    switch (numberOfViewports) {
    case 1:
        viewSize = "400px";
        break;
    case 2:
        viewSize = "198px";
        break;
    case 3:
        viewSize = "131px";
        break;
    case 4:
        viewSize = "98px";
        break;
    }
    $("[id^=view]").css("width", viewSize);
}

这里是 css

    * {
    margin: 0;
    padding: 0;
}
body {
    font-size: 14px;
}
.clear-fix {
    clear: both;
}
.no-highlight {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* why does menu margin excape parent without padding on container.. change to 0 and all margen excapes. */

#container {
    width: 400px;
    height: 456px;
    margin: 0 auto;
    padding-top: 1px;
    background-color: #555;
    border-radius: 5px;
}
/* Menu styling */

#menu {
    width: 231px;
    margin: 10px auto;
}

#menu li {
    width: 50px;
    height: 30px;
    border: 2px solid #58d;
    border-radius: 10px;
    background-color: #000;
    color: #333;
    line-height: 30px;
    text-align: center;
    font-size: .8em;
    text-transform: uppercase;
    list-style: none;
    float: left;
    cursor: pointer;
}

#menu li+li {
    margin-left: 5px;
}

#menu .selected {
    background-color: #fff;
    color: #333;
    font-weight: bold;
}

[id^="view"] {
    width: 98px;
    height: 400px;
    margin: 1px;
    float: left;
    background-color: #ddd;
}

【问题讨论】：

标签： javascript jquery html css filter

【解决方案1】：

jQuery 集合和 Javascript NodeList 都是类似数组的，因此您可以使用 .length 属性来获取元素的数量。

jQuery:

resetViewport($(".selected").length);

纯 Javascript：

resetViewport(document.getElementsByClassName("selected").length);

【讨论】：

嗯，这真的很有意义。太感谢了。所以就我而言。我的代码好还是不好？
可能有一些纯 CSS 方法可以使可见的 DIV 自动均匀地划分空间，这就是您似乎正在做的事情。但 CSS 布局不是我的强项，