Determine the number of visible li elements using jQuery

Question

Determine the number of visible li elements using jQuery

Currently, I am utilizing a jQuery script to count the number of li elements in my HTML code. Here is an example of the setup:

HTML:

<ul class="relatedelements">
   <li style="display:none;" class="1">anything</li>
   <li style="display:none;" class="2">anything</li>
   <li style="display:none;" class="3">anything</li>
</ul>

jQuery:

    $(function() {
        var numrelated=$('.relatedelements > li').length;
        $('.num-relatedelements').html(numrelated); 
    });

The current output of this script is: 3

Sometimes, I modify the style="display: none" property of certain li elements using jQuery within $(document).ready. For instance, I may execute $('.2').show();.

Now, I am looking to adjust the script so that it only counts the visible li elements by adding :visible as specified in the jQuery documentation:

    $(function() {
        var numrelated=$('.relatedelements > li:visible').length;
        $('.num-relatedelements').html(numrelated); 
    });

The updated script currently outputs: nothing

I am uncertain why this modification isn't producing the desired result. If anyone has any suggestions or insights, I would greatly appreciate the assistance. Thank you in advance!

jquery html css jquery-selectors html-lists

Answer 1

Answer №1

works perfectly for my project

$(document).ready(function(){
    $('.2').show();
    var numItems = $('.related-elements > li:visible').length;
    $('.num-related-elements').html(numItems); 
});

Check out the JsFiddle Link : http://jsfiddle.net/qwerty/3/

Answer 2

works perfectly for my project

$(document).ready(function(){
    $('.2').show();
    var numItems = $('.related-elements > li:visible').length;
    $('.num-related-elements').html(numItems); 
});

Check out the JsFiddle Link : http://jsfiddle.net/qwerty/3/

Answer 3

Answer №2

Everything is functioning correctly in this instance:

http://jsfiddle.net/username/example/ (1 displayed element)

http://jsfiddle.net/username/example/1/ (0 displayed elements)

It's worth noting that utilizing numbers as class identifiers is considered unlawful. (W3C Regulation, bullet 2) Class names are required to commence with a letter. It's plausible that manipulating this could be causing complications?

Aside from that, I can only speculate that the issue lies elsewhere. Have you ensured you are utilizing the most up-to-date version of jQuery? (Although during my evaluations, it performs well even on versions dating back to 1.3, after which it ceases working entirely)

Is it possible that you have misspelled "displayed" in your actual code? (I've made this mistake in the past)

Answer 4

Everything is functioning correctly in this instance:

http://jsfiddle.net/username/example/ (1 displayed element)

http://jsfiddle.net/username/example/1/ (0 displayed elements)

It's worth noting that utilizing numbers as class identifiers is considered unlawful. (W3C Regulation, bullet 2) Class names are required to commence with a letter. It's plausible that manipulating this could be causing complications?

Aside from that, I can only speculate that the issue lies elsewhere. Have you ensured you are utilizing the most up-to-date version of jQuery? (Although during my evaluations, it performs well even on versions dating back to 1.3, after which it ceases working entirely)

Is it possible that you have misspelled "displayed" in your actual code? (I've made this mistake in the past)

Answer 5

Answer №3

Items are considered hidden if they or their parent elements do not occupy any space in the document. This is determined by layout, not CSS visibility.

Preview:

<ul class="relatedelements">
   <li class="1 hidden">anything</li>
   <li class="2 hidden">anything</li>
   <li class="3 hidden">anything</li>
   <li class="4">anything</li>
    <li class="5">anything</li>
    <li class="6">anything</li>
    <li class="7 hidden">anything</li>
</ul>

<div class="num-relatedelements"></div>

CSS

.hidden {
    display: none;
}

JavaScript

$(function() {  
   var numRelated = $('.relatedelements > li:not(.hidden)').length;
   alert(numRelated);
   $('.num-relatedelements').html(numRelated); 
});

I have created a jsfiddle for your reference: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 6

Items are considered hidden if they or their parent elements do not occupy any space in the document. This is determined by layout, not CSS visibility.

Preview:

<ul class="relatedelements">
   <li class="1 hidden">anything</li>
   <li class="2 hidden">anything</li>
   <li class="3 hidden">anything</li>
   <li class="4">anything</li>
    <li class="5">anything</li>
    <li class="6">anything</li>
    <li class="7 hidden">anything</li>
</ul>

<div class="num-relatedelements"></div>

CSS

.hidden {
    display: none;
}

JavaScript

$(function() {  
   var numRelated = $('.relatedelements > li:not(.hidden)').length;
   alert(numRelated);
   $('.num-relatedelements').html(numRelated); 
});

I have created a jsfiddle for your reference: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 7

Answer №4

This is how it functions:

$(function() {
    var visibleItems=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(visibleItems); 
});

For a demonstration of this in action, click here.

Answer 8

This is how it functions:

$(function() {
    var visibleItems=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(visibleItems); 
});

For a demonstration of this in action, click here.

Answer 9

Answer №5

Check out what I found: http://example.com/fiddle

Answer 10

Check out what I found: http://example.com/fiddle

Answer 11

Answer №6

Indeed, just as others have mentioned, it functions properly even after displaying the element in document.ready:

http://jsfiddle.net/bKyt4/

Answer 12

Indeed, just as others have mentioned, it functions properly even after displaying the element in document.ready:

http://jsfiddle.net/bKyt4/

Answer 13

Answer №7

The reason your script is not returning anything is because all DIV's are currently hidden. It will only return a value of 1 when a specific element is shown.

Answer 14

The reason your script is not returning anything is because all DIV's are currently hidden. It will only return a value of 1 when a specific element is shown.

Answer 15

Answer №8

I experimented with this approach and it appears to be effective, as I am receiving a result of '1'.

$(function() {
    $('.2').display();

    var numConnections=$('.connectedElements > li:visible').length;
    $('.num-connectedElements').html(numConnections); 
});

Note: I believe using numerical values for attributes may not adhere to proper markup guidelines.

Answer 16

I experimented with this approach and it appears to be effective, as I am receiving a result of '1'.

$(function() {
    $('.2').display();

    var numConnections=$('.connectedElements > li:visible').length;
    $('.num-connectedElements').html(numConnections); 
});

Note: I believe using numerical values for attributes may not adhere to proper markup guidelines.

Answer 17

Answer №9

To start, create a div, span, or paragraph in the desired location to show the count. Next, add a ul element with li items.

 $('.notification').html(
 $('#ul-alerts li').length);

Answer 18

To start, create a div, span, or paragraph in the desired location to show the count. Next, add a ul element with li items.

 $('.notification').html(
 $('#ul-alerts li').length);

Determine the number of visible li elements using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

An unusual html element

Modify a section of an HTML text's formatting

Tips for resolving conflicts between CSS files

Exploring the contents of a JSON object

Alter numerous classifications based on varying circumstances at regular intervals

Having trouble using jQuery to target the element "(this)"?

Maintain saved states upon page load/refresh using jQuery Cookies

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

Restore the initial content of the div element

Unable to extend the data-toggle dropdown to the entire width of the screen

Troubleshooting the lack of functionality with justify-items in CSS Grid

Dynamic elements fail to trigger JS function calls

Implementing a Basic jQuery Animation: How to Easily Display or Conceal DIV Elements Using fadeIn and fadeOut

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

implement a click event handler for GLmol (webGL)

Converting HTML into an object using $compile

Incrementing the image name by 1 each time a new image is added to the directory

What is the correct way to create a template form in Django given the structure of my views.py file?

Tips for preventing Razor from interpreting special characters as HTML code

Executing multiple ajax calls and retrieving the results: A step-by-step guide