How to count how many elements a certain class has

I am using jQuery to try and find which IDs have a specific class name. The reason this is important to me is I use toggleClass () from jQuery to show and hide certain divs and when the button is selected. I want the viewport to be shown or hidden. I have two personal goals, one is to find a way to do this in jquery and the other is to figure out how to do it in javascript. I understand that javascript will be much more advanced and I'm ready.

  • How can I use resetViewport () to count the number of "selected" classes?
  • Is there a better way to do this?
  • In javascript, how can you do the same? Even if you tell me specific methods in js, that's ok. I am not asking for an exact code. I just want to learn.

I just have no doubt that I added some code. Let's start by browsing my personal web page called CodeAmend and here is the code

**** 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>

      

* here 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);
}

      

here's the 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;
}

      

+3


source to share


1 answer


The jQuery collection and Javascript NodeLists are like arrays, so you can use a property .length

to get the number of elements.

JQuery

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

      



Plain Javascript:

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

      

+8


source







All Articles