What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names?

var className = $('.floor-4').attr('class').split(' ')[1];
var classLength = $('.' + className).length;

Here is the HTML code:

<div id="demo">
  <div class="floor floor-1" data-floor="5" data-floor-sub="0">
    <span class="text">Floor 1</span>
  </div>
  <div class="floor floor-2" data-floor="5" data-floor-sub="1">
    <span class="text">Floor 2</span>
  </div>
  ...
  <div class="floor floor-5" data-floor="6" data-floor-sub="4">
    <span class="text">Floor 5</span>
  </div>     
</div>
javascriptjqueryhtmlcss

Answer №1

This function is designed to identify the most occurring class name among a group of elements with the same class. If multiple classes have the same frequency, it will return the first one encountered:

function findMostOccurringClass(){
    var groups = {}, max = 0, maxClass;
    $(".element").each(function(i, item){
        var classname = $(item).attr('class');
        groups[classname] = groups[classname] || 0;
        groups[classname]++;
    });

    for(group in groups){
        if(groups[group] > max){
            maxClass = group;
            max = groups[group];
        }
    }
    return maxClass;
}

For a practical demonstration, see this working example:

https://jsfiddle.net/kvycjh19/2/

Answer №2

To simplify this, you can create a function that will count the number of elements with a specific class using either the class name or the class selector (starting with a dot):

var getClassCount = function(className){
    return document.getElementsByClassName(className).length;
};

var getSelectorCount = function(classSelector){
    return document.querySelectorAll(classSelector).length;
};

If you prefer to have a custom jQuery method for this task:

jQuery.fn.customClassCount = function(className){
    return $(className).length;
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

I am facing a simple challenge at the moment. My goal is to dynamically change the background color of my rows, with the intention of incorporating this feature when expanding or contracting groups. Currently, I am attempting to utilize gridOptions.getRow ...

javascriptcssvue.jsag-grid

Tips for effectively showcasing dynamic data retrieved from a database

I need to showcase my dynamic data from a database in a specific format that can accommodate anywhere from one to five variables. https://i.sstatic.net/pPQZE.png https://i.sstatic.net/gSJw6.png How can I effectively display and present the data using HTML ...

htmlcss

JQuery loader & amazing animations

I have implemented the wow.js plugin along with a jQuery preload tutorial from here. Although the preloader works fine, I am facing an issue where the animation by wow.js starts before all the elements on the page are preloaded. I am looking to modify my ...

javascriptjquerywow.js

Storing HTML form information into a CSV file using Python and Flask

I am struggling with a small .py program that renders 2 HTML pages. One of the pages contains a basic form asking for a name and comment. I am having difficulty figuring out how to take the data entered in the form and store it into a csv file. While I h ...

pythonhtmlformscsvflask

Guide to sending a post request with parameters in nuxt.js

I am trying to fetch data using the fetch method in Nuxt/Axios to send a post request and retrieve specific category information: async fetch() { const res = await this.$axios.post( `https://example.com/art-admin/public/api/get_single_cat_data_an ...

javascriptvue.jsaxiosnuxt.js

Is there a way to avoid waiting for both observables to arrive and utilize the data from just one observable within the switchmap function?

The code snippet provided below aims to immediately render the student list without waiting for the second observable. However, once the second observable is received, it should verify that the student is not enrolled in all courses before enabling the but ...

javascriptangularrxjsobservableswitchmap

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Currently, I am working on a plain HTML file and conducting tests to ensure that the Google Ads and Analytics scripts are functioning correctly before implementing them on other pages. A colleague who has an AdSense account provided me with the script code ...

javascripthtmlgoogle-analyticsads

Encountering difficulty with installing node_modules on Express js

Encountered an error while attempting to install node_modules from the package.json file. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

javascriptnode.jsexpressmongoose

Access to data retrieval was restricted by CORS policies on my Node.js/Express REST API server

I am currently running a localhost node/express server that is designed to accept any post request with a body and then return the same body along with a message. To enable Cross-Origin Resource Sharing (CORS), I have integrated the cors node package into ...

javascriptnode.jsexpresscorsfetch

How to deal with jQuery's set val() behavior on SELECT when there is no matching value

Let's say I have a select box like this: <select id="s" name="s"> <option value="0">-</option> <option value="1">A</option> <option value="2" selected>B</option> <option value="3">C</option> </ ...

javascriptjqueryselect

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

htmldompdf

Retrieve data attributes to obtain details about the slider before and after

My task is to create a slider with information about the previous and next slides. For example, in the slider, there are left < and right > arrows. Behind these arrows, there are circles. When you hover over any arrow to change the next or previous ...

javascriptjqueryowl-carousel

``Sorry, the link redirection feature is currently experiencing technical

First and foremost, take a look at this example View here Based on the example provided, I would like to create a similar page using the Telrik Text Editor, with a list of links and their corresponding paragraphs. Here is the HTML I am using in the Telr ...

phphtml

Move the element that can be dragged with the identifier X to the designated drop area with the identifier

I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started. dropToContainer("myDraggable", "div3"); function dropToContainer(co ...

javascripthtmldrag

Innovative and interactive animated data display

I've taken inspiration from an example and expanded the code to achieve the following: Dynamic height adjustment Accessibility without JavaScript enabled Is this implementation correct? Can it be expected to function properly on most browsers? You ...

javascriptjquery

Obtain the identification number and full name from the typeahead feature

I am able to retrieve the name and ID, but I am only able to display the name. I have attempted using update and afterslected methods. Currently, I have this code which works well, however, it only fetches the name! $('input.typeahead').typea ...

javascriptajaxtypehead

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

javascriptjqueryhtml

Error: Attempting to access the 'clipboard' property on an undefined object results in a TypeError when invoking this.$q.electron.clipboard

I'm currently working on incorporating copy to clipboard functionality into my app using Electron. This is the command I am using: methods: { copyToClipboard () { if (process.env.MODE === 'electron') { this.$q.electro ...

javascriptnode.jsvue.jselectronquasar-framework

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

Using PHP variables in JavaScript to access getElementById

I have multiple forms displayed on a single PHP page. They all follow a similar structure: <form id="test_form_1" action="test_submit.php" method="post" name="test_form"> <label>This is Question #1:</label> <p> &l ...

phpjavascripthtml