Question

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

Answer 1

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

jQuery的：

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

普通Javascript：

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

如何计算有多少元素有一定的类

1 个答案: