$(.class) only executes for the first tag of that class name

Question

I am trying to make a javascript function that goes through the web page and looks for all of the tags of class name "option" and hides the ones that match the text in each of the if statements shown below.

In the example below, I tried using jquery to get the classes, but it only gets the first class with that name, not all of the classes of that name.

I have also tried using var element = document.getElementsByClassName('option'); to see if that would work but when I iterated through the list of elements and changed their display to none, the changes didn't show up.

What is a better way to iterate through a list of classes and update the css of only some of the elements?

Any help is appreciated. Thanks.

$(document).ready(function(){

if($('.option').html() == "C.&nbsp;"){
    $('.option').css('display','none');
}
if($('.option').html() == "D.&nbsp;"){
    $('.option').css('display','none');
}
if($('.option').html() == "E.&nbsp;"){
    $('.option').css('display','none');
}
if($('.option').html() == "F.&nbsp;"){
    $('.option').css('display','none');
}
});

Is that some pseudo-code? jQuery objects do not have `innerHTML` nor `display` properties. — Fabrício Matté, Nov 19 '12 at 21:44
ok, I changed the code to use jquery methods. And yes, I know I'm doing it wrong, which is why I am asking for a little help. lol. — fudge22it, Nov 19 '12 at 21:49
I figured it out. Thanks Jorge Zuverza for pointing it out to me without realizing it! As always, it was a little tiny mistake in my code. haha. — fudge22it, Nov 19 '12 at 21:56

score 1 · Answer 1 · answered Nov 19 '12 at 21:48

If I understood what you want, this should work:

$(document).ready(function(){
    $('.option').each( function(i,e) {
        var current = $(e).html();
        if (current == "C" || current == "D" || 
            current == "E" || current == "F") {
           $(e).hide();
        }
});

score 1 · Answer 2 · answered Nov 19 '12 at 21:49

1

Use the .each function

$('.option').each(function(index) {
    if($(this).html == "E")
       $(this).hide();
});

answered Nov 19 '12 at 21:49

Jules

91
5

SpYk3HH · Accepted Answer · 2012-11-20T02:45:56.253

You're not getting only one element, you just simply only manipulating the "first" element in the jQuery Object that is returned by the $('.option') call. What you need to is jQuery's .each() function in order to iterate through ALL of the elements returned by the jQuery call. Also, the long if statement can be shortened, but I assume you knew that and have other purposes. Anyway, once .each is called, you can use the callback function to manipulate EACH element as it is passed through. This is much like a for loop. The parameter i in the following example represents the index value of the element as the object is iterated through. It is 0 based, in other words, the 3rd option element to pass through would set the param i to 2

Try this && Good Luck:

$(function() {
    $(".option").each(function(i) {
        var txt = $(this).text();
        if (txt == "C." || txt == "D." || txt == "E." || txt == "F.")
            $(this).hide();
    });
})

Alternate links to investigate

.html()
- Use this method to get or set the innerHtml of an element
.val()
- Use this method to get or set the value of an element
  - Primarily HTML tags select, input, && textarea

I did it wrong ... Lol, forgot to add link to .each in the API, it's added now, enjoy, hit me up if you need more help — SpYk3HH, Nov 19 '12 at 22:06

score 1 · Answer 4 · answered Nov 19 '12 at 21:51

$('.option').html() will only get the innerHTML of the 1st element. If you want to look at all of them, you need to use $.each.

$('.option').each(function(){
    if($.inArray($(this).html(), ['C', 'D', 'E', 'F']) !== -1){
        $(this).hide();
    }
});

score 1 · Answer 5 · answered Nov 19 '12 at 21:58

I see You are using jQuery. When you wrapp some class with jQuery function like this $('.option') you will get an element set, meaning it will containg all of those elements wrapped in special jQuery classes that offer you a lot of functionality

Best way to iterate trough element set is by using jquery .each() function, http://api.jquery.com/jQuery.each/ it will apply callback function to every element. Something like this:

$(document).ready(function(){
    $('.option').each(function() {
        //Here you can access coresponding element to each iteration with this kyeword
        // you can wrap it again like this $(this) and get all of jQuery functionality on that object again
        $(this).hide();
    });
}

Andrew Cooper · Answer 6 · 2012-11-19T22:07:26.500

Try this:

$(document).ready(function(){
  $('.option:contains("C.")').hide();
  $('.option:contains("D.")').hide();
  $('.option:contains("E.")').hide();
  $('.option:contains("F.")').hide();
});

The JQuery selector '.option:contains("C.")' finds all tags of the option class that contain the text "C.", and the .hide() function hides each element in that collection.

http://jsfiddle.net/b3hVw/

Or alternatively, in a single statement:

$(document).ready(function(){
    $('.option').filter(function() {
        var html = $(this).html();
        return html === "C." || html === "D." || html === "E." || html === "F.";
    }).hide();
});

$('.option') finds all the elements with the option class. The .filter(function() { ... }) call filters that list to just the ones for which the filter function returns true, and then the call to .hide() hides those elements.

http://jsfiddle.net/H7Lu8/

Thanks! I didn't realize you could do this. – fudge22it Nov 19 '12 at 21:58 — fudge22it, Nov 19 '12 at 21:58

$(.class) only executes for the first tag of that class name

6 Answers6