In javascript (jquery), I'm retrieving a list of elements that start with "#error-". This works correctly. The problem I have is that I can't assign a value to elements of the array while looping through it.

I'm using this function:

function HideErrorMessages(){
    var errors = $('*[id^="error-"]');
    for (var i = 0; i < errors.length; i++) {
        errors[i].css('display', none);
    }
}

As you can see, I tried this "css" possibility. Doesn't work. I also tried:

• errors[i].hide();
• errors[i].style.display = 'none';

But when using " alert(errors[i]) ", I get a response which indicates that it contains a list of "span" elements (which is correct).

So how can I do to hide elements in this loop?

Thanks!

In javascript (jquery), I'm retrieving a list of elements that start with "#error-". This works correctly. The problem I have is that I can't assign a value to elements of the array while looping through it.

I'm using this function:

function HideErrorMessages(){
    var errors = $('*[id^="error-"]');
    for (var i = 0; i < errors.length; i++) {
        errors[i].css('display', none);
    }
}

As you can see, I tried this "css" possibility. Doesn't work. I also tried:

• errors[i].hide();
• errors[i].style.display = 'none';

But when using " alert(errors[i]) ", I get a response which indicates that it contains a list of "span" elements (which is correct).

So how can I do to hide elements in this loop?

Thanks!

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 6, 2016 at 16:33 zuokuokzuokuok 47111 gold badge77 silver badges1818 bronze badges 3

• if errors[i] is also a list you need to loop through that as well. Also just a tip, console.log is generally preferred over alert – mjr Commented Jan 6, 2016 at 16:35
• errors[i] will return DOM node, try errors.eq(i).css('display', 'none') also you call css with none instead of 'none', which should throw exception that none is undefined. – jcubic Commented Jan 6, 2016 at 16:41
• @mjr errors is a list of html elements (span). It is not a list of lists. errors[i] should be the element itself, unless I am doing something wrong. – zuokuok Commented Jan 6, 2016 at 16:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try to invoke .hide() over the jquery object,

$('[id^="error-"]').hide();

You don't need to iterate over that elements one by one. If you fetch elements from a jquery object by bracket notation, then it will return native javascript DOM node. So .css() will cause error as it is not a part of a DOM node.

errors[i] makes reference to a property inside the jQuery object which is a selected DOM object. There's no css function for those objects, it's a jQuery thing. But you can use jQuery eq to select the object and have access to jQuery methods:

errors.eq(i).css('display', 'none');

You can also use each to iterate each element of the jQuery object:

$('*[id^="error-"]').each(function(){
    $(this).css('display', 'none');
});

I would go like this.

$('#buttonClick').on('click', function() {
  var showing = $(this).closest('.thumbBrowser').find('ul li:visible');
  var next = showing.last().next();
  if( next.length === 0 ) {
    next = $(this).closest('.thumbBrowser').find('ul li').first();
  }
  next.toggleClass('hidden').next().toggleClass('hidden');
  showing.toggleClass('hidden');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg" alt="one"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg" alt="two">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg" alt="three">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg" alt="four">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg" alt="five"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg" alt="six">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>

.hidden {
  display:none;
}