What is the best way to retrieve an array of divs that have a particular class assigned to them?

Recently, I've been developing a web project that requires a gallery with a slider below it. To tackle this issue, I have utilized the following JavaScript code within a forEach(element) function:

var divnumber = Array.from(element.parentNode.children).indexOf(element);

This approach allows the pagination to adjust based on the index of the selected element.

However, in order to ensure responsiveness and meet the specific requirements set by the graphic designer for the mobile view, I now need to retrieve the number of divs using their class names. Essentially, I need to work with the same array but containing different values.

Is there a modification that can be made to the above line of code to enable it to retrieve the index of an element based on its class rather than its parent? For additional context, refer to this pen: https://codepen.io/ridonibishi/pen/BaNyBva

I appreciate any assistance you can offer! Thank you.

Answer №1

Consider the following approach:

var divIndex = Array.from(document.getElementsByClassName('class')).indexOf(element);

This code snippet will deliver the desired outcome.

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

A guide on coding the source tag script for a payment form in CodeIgniter, specifically for a JavaScript form

Scenario: I have a variable called $data['tabdata'] that I am passing from controller C to view V. This variable includes a script element pointing to http://example.com/1.js. Problem: The script in 1.js is not running properly in the view. This ...

What is the best way to divide an index in an array into two separate parts in order to ensure that neither part contains an odd or even number?

When verifying roomNumber[i], I must ensure that BOTH digits (assuming it is two-digit) are neither even nor odd. The number can only be accepted if this condition is met. Furthermore, I need to validate that the second digit is greater than or equal to ...

Showcasing special characters in JavaScript

I am encountering an issue with displaying accented characters in my application; instead of showing ó, it is displaying ⛽. The string originates from a JSON file fetched from a server. Below are the technical specifics: JSON: (This is the data retriev ...

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

The functionality of ng-table appears to be compromised when working with JSON data

Currently, I am facing an issue while using a JSON file to populate data in my Angular ng-table. Even though the JSON data is being displayed in a regular table format, certain functionalities of ng-table like pagination and view limit are not functioning ...

"Selecting an object in Three.js after it has been deleted

Implementing object picking in code is a popular technique: function Picking(event) { var raycaster = new THREE.Raycaster(); event.preventDefault(); mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1; mouse.y = -(event.clientY / renderer. ...

Dialogue box closes automatically within a dropdown menu

I am using shadcn in my next.js 13 project and I want to implement a dropdown feature that allows users to edit or delete an entry. However, when the user clicks on "delete", the dialog pops up for only about 0.5 seconds before closing along with the dropd ...

Using JavaScript to dynamically retrieve element IDs

Within the content on my page, there are multiple tables displaying product information along with their respective authors. Additionally, there is a div that contains hyperlinks for each author. Currently, I am linking the authors' names to hyperlink ...

Retrieving nested keys from a JSON object using JavaScript

I am currently working with a JavaScript function that produces responses in the following format using Node.js and EJS: "index_1": { "mappings": { "type_1": { "properties": { "field_1": { "type" ...

What is the best approach for handling a situation where the data parsed from a JSON file is either null or yields no

I am facing an issue with displaying a toast message when the database table is null while parsing JSON data. Essentially, when there are no results or data found, I want to display a toast saying "Sorry no data found". Any assistance on this matter would ...

Updating elements in a React array without causing rerendering of other elements in the array

Can you update only one element in an array without causing others to rerender? For example: Say you have an array of 500 <Card> components and want to modify <Card> number 27 (which updates the properties of the array). Is it possible to rere ...

Incorporate child routes within a React component

I've been attempting to include <route> in a component within a routers component, but it doesn't seem to be working. Can anyone provide some assistance? My login page currently has a form and I'd like to switch that out with routes. ...

The CSS slide effect is causing an overlap with the sticky top menu bar

When scrolling, the goal is to have the menubar stick as the second div with the other divs going under it. However, only the third div, the sliding banner, is overlapping with the sticky menubar while the others are functioning correctly. Is there anyone ...

Tips for setting up a Vue application (using vue-cli) to include nonce attributes in created script tags

My vue application, compiled using vue-cli, has a vue.config.js file structured as follows: 'use strict'; module.exports = { publicPath: `${process.env.CDN_URL || ''}/dist/`, lintOnSave: true, transpileDependencies: [], outputD ...

initiating angular and node individually but with integration between them

For testing purposes in production, I needed to separate my angular 1.x frontend client and node backend server code. Both the client and server use API functions provided by node, but they are running on different servers on my local machine. My node serv ...

The dropdown-menu is positioned in a different location than its relative position

Utilizing the bootstrap dropdown feature in the navigation bar with a menu (represented by three dots) icon https://i.sstatic.net/vR13Z.png However, the issue arises on mobile devices. When I open the navigation bar and click on the menu button, the dropd ...

@media query not functioning properly with certain rules

I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules. For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. How ...

The CustomValidator ClientValidationFunction will only activate on the second or subsequent submission if CheckBoxList is checked

I am encountering an issue with a user control that is dynamically added to pages on DNN. The user control is built on a customized version of CheckBoxList and includes a CustomValidator with ClientValidationFunction set to a javascript function. It works ...

Unlocking the Power of Session Variables in AngularJS using Ui-router

Currently, I am utilizing Angular to manage routes. On the server side, Passport is being used so that I can access the user session variable req.user in my views. However, when dealing with a route rendered by ui-router, my req.user ends up being undefine ...

Encountering a compile-time issue while constructing a basic partial array class in C++

I'm struggling with the compilation of my Partial Arrays class. When trying to call a previous member function within one of my functions, I encounter the error message "member reference base type 'ITEM_TYPE [255]' is not a structure or unio ...