Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Boris Kamp
Boris Kamp
16,660 Points

javascript watch html change

Hi guys, I have this unordered list: $("#target-product .values ul.list") now, if it has an li item, I want to display some html elements, these ones: var hiders = $('#excerpt, #intro, #text, #conclusion, #rating, #pros, #cons'); if the ul has no li's, I would like to hide hiders, this condition should be continuously watched, so I figured something like this, but it does not work:

jQuery(document).ready(function($) {
    var hiders = $('#excerpt, #intro, #text, #conclusion, #rating, #pros, #cons');
    hiders.hide();

    $("#target-product .values ul.list").on('change', function(){
        if( $("#target-product .values ul.list li").length ) {
            hiders.fadeIn(500);
        } else {
            hiders.fadeOut(500);
        }
    });
});

but it does not work.... Im new to those .on and .change functions, so I can't get it to work.

What am I missing? Thanks!

2 Answers

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

if ul has no li, which means if li = 0, then hide hiders, if you want that, so i would write it like that:

$(document).ready(function(){

  var x = $('ul.list li').length;

  if ( x = 0 ) {
    hiders.hide();
  } 

});
Boris Kamp
Boris Kamp
16,660 Points

Thank you for your reply, but this only fires on document.ready right? The list item may change on page when the user does thing, so I would like to watch it with some kind of .on( 'change', function (){}); function but have no clue on how to exactly do this

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

Do you mean to add the .change() to your code? something like that:

$(document).ready(function(){

    $('ul.list li').change(function(){
      var x = $('ul.list li').length;
          if ( x = 0 ) {
            hiders.hide();
          } 

  });
});
Boris Kamp
Boris Kamp
16,660 Points

Yes I mean something like that. I figured out something similar, but it's not working somehow, anybody has any clue? I even tried a console.log('test'); inside the change function, but it does not print it when the li changes. The .length var does work tho, it's 1 when there's one, en 0 when there's no list item.... I also tried this, with no success:

$("#target-product .values ul.list li").on('change', function(){
    var x = $('#target-product .values ul.list li').length;
    console.log('li =' + x);
    if ( x = 0 ) {
        hiders.fadeOut(500);
    } else {
        hiders.fadeIn(500);
    }
});

And this:

$('#target-product .values ul.list li').change(function(){
      var x = $('#target-product .values ul.list li').length;
      console.log('li =' + x);
      if ( x = 1 ) {
         hiders.fadeIn(500);
      } else {
         hiders.fadeOut(500);
      } 
});

without any luck as well....