Calculating the total width of list items with a top value of 0px

Here is some HTML code:

<ul class="list-ul">
    <li style="width:10px; top: 0px"></li>
    <li style="width:10px; top: 0px"></li>
    <li style="width:10px; top: 5643px"></li>
    <li style="width:10px; top: 56px"></li>
</ul>

This JavaScript function tries to sum the width of li elements with top = '0px':

var topValue = $('.list-ul li').css('top');
var totalWidth = 0;
if (topValue === '0px'){
    $(this).each(function(){
        totalWidth += $(this).outerWidth();
    });
    alert(totalWidth);
}

I am experiencing issues with this code, it doesn't seem to work as expected. Can anyone provide assistance?

javascriptjqueryhtmlcss

Answer №1

To iterate through each list item and check the top value, follow these steps:


$(function(){

    var totalWidth = 0;
    var items = $('.listul li');
    items.each(function(){
        if($(this).css('top') == "0px"){
             totalWidth += $(this).outerWidth();
        } 
    });
    alert(totalWidth);

});

Check out this JsFiddle link

Answer №2

Please include a style tag with width:10px specified for the li element, rather than using width10px

Answer №3

Here is the recommended HTML code:

 <ul clas="listul">
    <li style="width: 10px; top: 0px;"></li>
    <li style="width: 10px; top: 0px;"></li>
    <li style="width: 10px; top: 5643px;"></li>
    <li style="width: 10px; top: 56px;"></li>
</ul>

We hope this solution works for you.

Answer №4

Make sure to utilize the compare operator (==) within your if statement.

Answer №5

If you want to achieve this, follow the code below:

let totalWidth = 0;
$('.listul li').each(function(index, element) {
    let $element = $(element);
    if ($element.css('top')=='0px') {
        totalWidth += $element.outerWidth();
    }
});

alert(totalWidth);

To see a demonstration, click on this LINK: JSFiddle

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

Updating the content on a page in Flask without redirection using Ajax and JQuery

I am in the process of developing a website where users can track tourist attractions. I want the follow button to change to unfollow when clicked. Currently, the page refreshes due to redirection, but I would like the page to update without reloading. I f ...

pythonjqueryajaxflaskjinja2

Guide to generating an iframe that is triggered by a button click with the help of jquery

Is it possible to dynamically insert an iframe into a column div on a web page by clicking on it? I want the iframe to remain hidden when just viewing the page, but to become visible when a button is clicked. How can this be achieved? ...

javascriptjqueryhtmliframe

What is the method for rotating an object on the world axis in three.js?

Is there a way to perform rotations using the axis of the world rather than the object? I'm attempting to rotate an object, but I'm finding that after the initial rotation, subsequent rotations are not behaving as expected. If rotating along th ...

javascriptthree.js

Performing both an insertion and an update operation on separate tables simultaneously within a single

I have designed a form with an input field that features autocomplete functionality, while the other input field is set as readonly. <div id="windowContent"> <form action="rdpw_monitoring_process.php" method="post"> <tab ...

phpjquerymysqlinsert-update

Building and launching websites for both mobile and desktop platforms

What is the best approach for developing a website with unique designs optimized for both desktop and mobile users? ...

htmlcsswebmobileresponsive

Tips on extracting JSON data from an HTML source using BeautifulSoup in Python

In my HTML page, I have a variety of information including: <input class="json-data" id="init-data" type="hidden" value='{"keyboardShortcuts":[{"name":"xxxx","description":"yyyyy", > etc... I am trying to extract something like name = xxxx ...

pythonhtmljsonparsing

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

htmlcss

Adjust the initial position of the slider handle on the WooCommerce widget price filter

Is there a way to enhance the visibility of the woocommerce widget price filter by adjusting the starting position of the slider handle? For example, shifting it 10% towards the right from the beginning of the range bar. Check out the comparison of positi ...

phphtmlcsswordpresswoocommerce

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

Attempting to convert Spotify's response string into a JSON object using Node.js

Lately, I've been utilizing the Spotify API through AJAX in the browser without any issues. However, now that I'm attempting to use it with node.js, I'm encountering a syntax error when trying to parse the string into a JSON object. Here&apo ...

javascriptnode.jsapispotify

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

I am currently utilizing Selenium Webdriver to extract content from a webpage. The challenge I'm facing is that the page dynamically loads more content using AJAX as the user scrolls down. While I can programmatically scroll down using JavaScript, I a ...

javascriptajaxseleniumscrollwebdriver

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

htmlcssjsp

Deciphering assorted outcomes from the Google feed API

Could anyone provide me with an example of parsing a mixed feed result from the Google API using both XML and JSON? I'm attempting to access the enclosure element of the feed, but it appears that the JSON result does not include it! Thank you in advan ...

jqueryxmljsonrss

What is the best way to showcase a category on the thumbnail of a WordPress post?

Hey everyone, I hope you're all having a great day! I need some assistance with a slider I'm creating on my WordPress site. I can't seem to figure out how to display the category of each post that appears in the slider and have it stand out. ...

csswordpresshtml

Utilizing ESLint to Conditionally Import External Packages

I'm attempting to bring in a package and utilize it within my Vue application like so: import ExternalSamplePackage from 'external-sample-package' export default { directives: { ExternalSamplePackage } } Since I am in SSR mode, I want ...

javascriptvue.jsnuxt.jseslint

Challenges when utilizing AJAX and JQuery for selecting multiple items and retrieving data from a JSON file

I am currently working on a live search feature that extracts data from a JSON file using AJAX and jQuery. The goal is to make the fetched value clickable and populate a multiselect field with it. Once this is achieved, the plan is to capture the remaining ...

javascriptjqueryjsonajaxmulti-select

Display in Google Chrome without any dialogues

Hello friends, I am currently working on adding a print button to my website. I am testing it in Chrome and would like the page to be printed directly without showing any dialog boxes. However, I am facing some difficulties with this process. If anyone has ...

javascriptgoogle-chromevue.js

Ensuring continuous session activity

While using the open office letter editing tool, users encounter a timeout issue where the application screen displays a timeout message. Upon initial analysis, it appears that if users are working in the open office for longer than 60 minutes, the server ...

javajavascriptajax

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

htmlcsssvginline

Unleash full rotation capabilities in OrbitControls.js

Currently, I am utilizing OrbitControls.js to rotate the camera around a fixed point. My intention is not to restrict any vertical rotation - my goal is for the camera to smoothly circle the model (orbits around the pivot point). I experimented with remov ...

javascriptthree.js