遍历元素列表并隐藏它们

Question

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!

Answer 1

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.

Answer 2

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');
});

Answer 3

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.com/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; }