$(.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. "){
    $('.option').css('display','none');
}
if($('.option').html() == "D. "){
    $('.option').css('display','none');
}
if($('.option').html() == "E. "){
    $('.option').css('display','none');
}
if($('.option').html() == "F. "){
    $('.option').css('display','none');
}
});

Answer 1

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

Answer 2

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

Answer 3

Use the .each function

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

Answer 4

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

Answer 5

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

Answer 6

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/