How can I retrieve the value of a specific element by referencing the class of another within

Question

How can I retrieve the value of a specific element by referencing the class of another within

I have come across the following HTML:

<div class="calculator-section">
    <p>
        <span class="x"></span>
        <span class="amount">30</span>
    </p>
    <p>
        <span class="y"></span>
    </p>
</div>

My goal is to extract the number inside the  with the class 'amount' from each calculator-section based on the span with class 'x'. It's important to note that there could be multiple divs with the class 'calculator-section' and various  elements within those with different spans.

Here's a rough idea of what I'm attempting, even though it's not functional code:

var amount = 0;

$('.calculator-section p').each(function(i, obj) {
    if($(this).$('span').className == "x") {
        //Assign the value within the <span> with class 'amount' in the same <p> to the 'amount' variable.
    }
});

I hope this example clarifies things. Any suggestions?

javascript jquery html css

Answer 1

Answer №1

Here is my suggestion:

$('.section-calculator p .x').text(function () {
    return $(this).next('.amount');
});

Check out these resources for more information:

next().
text().

Answer 2

Here is my suggestion:

$('.section-calculator p .x').text(function () {
    return $(this).next('.amount');
});

Check out these resources for more information:

next().
text().

Answer 3

Answer №2

Give this a shot

let totalAmount = 0;
$('.calculator-section p span').each(function(index, element) {
    if($(element).attr('class') == "x") {
        totalAmount = $(element).next('.amount').text();
        return false;
    }
});
alert(totalAmount);

Answer 4

Give this a shot

let totalAmount = 0;
$('.calculator-section p span').each(function(index, element) {
    if($(element).attr('class') == "x") {
        totalAmount = $(element).next('.amount').text();
        return false;
    }
});
alert(totalAmount);

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

Answer №1

Answer №2

Similar questions

Having difficulties accessing information from the HTML document

Mastering the art of linking asynchronous callbacks based on conditions

Whenever the state of a React component is modified, it does not automatically trigger a re

When using React, draggable components with input fields may lose their ability to receive focus when clicking on the input field

Implementing promises in my MEAN stack application

What's the best way to ensure that the theme state remains persistent when navigating, refreshing, or revisiting a page in the browser?

How come the data I send gets converted to Undefined when working with Tabulator?

I have tried to create two apps in AngularJS, but unfortunately, they are not functioning as expected

Create a path on the Google Map that follows the designated route

Inject Custom ASP Control Script into the DOM dynamically upon registration

Come back within a function called by a jQuery.ajax request

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

Conceal Bootstrap Toast for a day following dismissal

Using Jquery's append() method to dynamically alter the HTML content

Looking through a Json file and retrieving data with the help of Javascript

Mongoose consistently fails to properly save dates

Transforming a comprehensive php form into a single, streamlined page form

I am unable to retrieve images using the querySelector method

Troubleshooting: AngularJS ng-include not functioning as expected

What is preventing CSS from adding a line break for the input element?