how to count how many elements have a certain class


Tags: javascript,jquery,html,css,filter

Problem :

I am using jQuery to try and find which IDs have a certain class name. The reason this is important to me is I am using toggleClass() from jQuery to show and hide certain divs and when a button is selected I want a viewport to display or hide. I have 2 personal goals: One is to find a way to do this in jquery and the other is to understand how to do this in javascript. I understand the javascript will be much more advanced and I am prepared.

  1. How can I use the resetViewport() to count the amount of "selected" classes?
  2. Is there a better way to do this?
  3. In javascript, how can one do this same thing? Even if you tell me specific methods in js thats ok. I am not asking for exact code. I just want to learn.

Just so there is no question I added the code. Lets start by looking at my personal hosted 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 is 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 is 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;
}


Solution :

jQuery collections and Javascript NodeLists are both array-like, so you can use the .length property to get the number of elements.

jQuery:

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

Plain Javascript:

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

    CSS Howto..

    How to prevent adding CSS 'class' properties

    How to add new property within existing css?

    How to setup flexible box CSS through jQuery? css( display, '-moz-box') doesn't seem to work?

    How to improve this code to combine/compress CSS using PHP [closed]

    How to change the focus state in CSS to just affect the keyboard and not mouse clicks

    How to keep an image and text (vmax font) aligned when resizing browser?

    How do I stop animation in HTML and CSS

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    How to make a div fill the entire page height using css? [closed]

    How to create css based breadcrumb which supports IE8 [closed]

    CSS - how to overflow from div to full width of screen

    How to add a sliding div to these CSS Message Bubbles?

    How to stretch vertical scroll?

    How to resolve css incompabilities/differences between different versions of IE?

    How to create CSS3 bounce effect with PURE CSS

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    CSS: How to align table data

    How to use CSS :hover to make extra div block elements display?

    How to make a ccs transition only forward

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to use @RenderPage to include CSS content inline - MVC Razor

    how to ajust the background pic according to outer div in css

    Show/Hide Div in jQuery, issue with “skipping” divs

    How to re-use common css rules in css( sass ) [closed]

    How to change the background color of a span/div WITHOUT CSS [closed]

    css top nav - left nav (menu), title in center, right side (more buttons) - howto?

    How can I build a dynamic menu using CSS and JavaScript?

    How do I reduce the space between my menu titles and items?

    In CSS, how to not float a 300px wide Div to the next line?

    How can I adjust the Wordpress Twentyeleven theme so that the page width is 100% and centered?