What is the best way to retrieve values from li elements using Cheerio/jQuery?

<div class="tabs__content tabs__content--bg js-tab-panel">
<div class="tabs__panel tabs__panel--active">
   <div class="product__sizes-wrapper">
      <ul class="product__sizes-select js-size-select-list" data-locale="UK">
         <li class="product__sizes-option" data-msg="Sample Message" data-name="6"  data-value="060">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">6</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="7"  data-value="070">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">7</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="8"  data-value="080">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">8</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="9.5"  data-value="095">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">9.5</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
      </ul>
   </div>
</div>

I'm looking to extract the values from the product__sizes-size-1 classes and create an array out of them. I attempted using a .map() function to achieve this, but the resulting array appears empty. My goal is to have the array populated like [6, 7, 8, 9.5] etc...

const sizes = $(".product__sizes-wrapper [data-locale = 'UK']").map(function() {
                        return $(this).text();
                     }).get();
javascripthtmljquerycsscheerio

Answer №1

Your method is on the right track, but you have simply selected the incorrect selector. Make sure to use product__sizes-size-1 instead:

$(document).ready(function(){
    var sizes = $('.product__sizes-size-1').map(function(){return $(this).text()}).get();
});

Answer №2

To choose the specific item, 

$('#product__sizes-select li.product__sizes-size-1');

In a list format

var product_sizes = [];
$('ul').each(function() {
    var localproduct_sizes = [];
    $(this).find('li').each(function(){
        localproduct_sizes.push( $(this).attr('product__sizes-size-1') );
    });
    product_sizes.push(localproduct_sizes);
});

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

Achieving a centrally aligned flex container with left-aligned flex items

My goal is to center the flex items, but when they go onto a second line, I want item 5 (from image below) to be positioned under item 1 instead of centered in the parent container. https://i.sstatic.net/GhD1E.png Here's a sample of my current setup ...

htmlcssflexbox

The HTML form input allows users to input multiple answers for each field

I am struggling with how to phrase this question properly, but I will do my best. Currently, I have a form that collects information about users' employment history. The structure of my form is as follows: <form name="EmploymentHistory" action="Fo ...

htmlmysqlarraysformsinput

Navigating through the various levels of organization within Meteor, it is

In my Meteor application, I am dealing with groups and items. Each item is associated with a group. Some groups are part of a larger hierarchy, where a group can contain subgroups. Here is an example of what the hierarchy might look like: Group 1 Su ...

javascriptnode.jsmongodbmeteor

Nested Promise.all within another Promise.all appears to terminate prematurely, triggering a warning indicating failure to return from a promise

I am utilizing this function to be invoked within another Promise.all. However, I consistently encounter a warning message: Caution: a promise was generated in a handler but was not returned from it. Additionally, the function deleteFutureAppointments() ap ...

javascriptnode.jspromise

When navigating between Dynamic Pages using NuxtLink, the store data is not accessible

Check out the demo below. Click here for stackblitz When transitioning from a top page to a post page, the correct content is displayed. However, moving from one post page to another does not display the correct content immediately. Reloading the page w ...

javascriptvue.jsnuxt.js

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

Create a new chart using completely unique information

I am currently working on implementing the example found at http://bl.ocks.org/mbostock/1093130. The goal is to have the "update" function redraw the graph with a completely different dataset each time a button on the DOM is pressed. I have made some modif ...

javascriptd3.jssvg

The child elements will take up the entire space within the parent element

I need to display N child divs with varying widths inside a parent div of unknown width. I want the child divs to fill and align side by side in the parent div, similar to a td - tr relationship. Can you help me achieve this layout? ...

htmlcss

Stopping a recurring setTimeout using an API request: What's the solution?

I have a NextJS application that runs a recursive setTimeout when the server is started. I am looking to create an API endpoint that can control this loop, allowing me to start and stop it as needed in a production environment. This loop specifically proce ...

javascriptnode.jsnext.jssettimeout

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

javascriptcssmeteormouseenterspacebars

How to seamlessly submit a modal form in Laravel 5.6 while keeping another form open

My Current Situation: Currently, I am working on a web application where users can have qualifications added to their profiles. Within the Edit Employee form, there are options to add or delete qualifications associated with a specific user. Clicking on ...

phpjquerylaravelformsbootstrap-modal

a label placed in a random location on the webpage

I am experiencing an issue on our website that uses a WordPress theme called Flat. Whenever we add a new page, there is an 'a' tag that appears to surround the entire page. This tag is not visible in the editor, leading me to believe it is being ...

phphtmlwordpress

The combination of Heroku (Cedar) with Node, Express, and Jade is causing issues with the client-side javascript files in a subdirectory. While they work fine locally with foreman and

As a newcomer to node and Heroku, I am facing what seems like a simple permission issue. Despite my efforts, I am unable to pinpoint the exact source of the problem. In a sub-directory located one level beneath my root directory where the web.js file is s ...

javascriptnode.jsherokuexpresspug

Crafting a clever smart banner using jquery.smartbanner for Android Firefox users

In order to display smartbanners on my mobile website, I utilize jquery.smartbanner. This implementation has been successful for ios, windows phone, and the default android browser. However, when testing on Firefox for android, the smartbanner is not visib ...

javascriptjquerydjangomobile

What is the best way to dynamically load content with AJAX that includes a script?

Currently, I am in the process of developing a website where I am utilizing jquery/ajax to dynamically load content onto the homepage. The test site can be found at [. While the home and about me pages load perfectly, I am encountering an issue with the pr ...

javascriptphphtmlajax

When navigating back to the Homepage from another page, React displays the Homepage

Recently, I started learning React and following the Traversy crash course along with an additional video on React router 6+. My route setup looks like this: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' return ( &l ...

javascriptreactjsreact-routerreact-router-dom

Exploring effective testing approaches for C++ plugins in Node.js

When working on Node JS, I have experience creating native C++ modules. However, my testing approach typically involves writing tests for these modules in Javascript. I am curious if this is an effective test strategy or if there are more optimal ways to ...

javascriptc++node.jsdebuggingtdd

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

The designated redirection path, as indicated in the 'next.config.js' file for a particular project, has now been applied to all projects

Something strange is happening... I set a redirect path for the root index page in one of my projects and it worked perfectly, but now all of my other projects are also being redirected to that same path when I try to visit localhost:3000. It's alway ...

javascriptnode.jsnext.jsnext-router

Is there a way to include this function in an array without triggering it right away?

In my coding project, I am working with an array of functions that return jQuery deferred AJAX objects known as phoneAjaxCalls. The main function called newPhone is where multiple calls are being pushed and it requires two arguments. function newPhone(tlc ...

javascriptjqueryajaxpromise