$(.class) выполняется только для первого тега этого имени класса

Я пытаюсь сделать функцию JavaScript, которая проходит через веб-страницу и ищет все теги имени класса "option" и скрывает те, которые соответствуют тексту в каждом из операторов if, показанных ниже.

В приведенном ниже примере я попытался использовать jquery для получения классов, но он получает только первый класс с этим именем, а не все классы с этим именем.

Я также пытался использовать var element = document.getElementsByClassName('option'); чтобы увидеть, сработает ли это, но когда я перебрал список элементов и изменил их отображение на none, изменения не обнаружились.

Какой лучший способ перебрать список классов и обновить CSS только некоторых элементов?

Любая помощь приветствуется. Благодарю.

$(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');
}
});
Источник

6 ответов

Решение

Вы не получаете только один элемент, вы просто просто манипулируете "первым" элементом в объекте jQuery, который возвращается $('.option') вызов. Что вам нужно, так это функция.each() jQuery, чтобы перебрать ВСЕ элементы, возвращаемые вызовом jQuery. Кроме того, длинное выражение if может быть сокращено, но я предполагаю, что вы знали об этом и имеете другие цели. В любом случае, после вызова.each вы можете использовать функцию обратного вызова для манипулирования КАЖДЫМ элементом при его прохождении. Это очень похоже на цикл. Параметр i в следующем примере представляет значение индекса элемента, через который проходит объект. Он основан на 0, другими словами, третий элемент option, через который будет проходить, установит параметр i в 2

Попробуйте это && Удачи:

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

Альтернативные ссылки для расследования

  • .html()
    • Используйте этот метод, чтобы получить или установить innerHtml элемента
  • .val()
    • Используйте этот метод, чтобы получить или установить значение элемента
      • В первую очередь HTML-теги select, input, && textarea
Источник

$('.option').html() получит только innerHTML 1-го элемента. Если вы хотите посмотреть на все из них, вам нужно использовать $.each,

$('.option').each(function(){
    if($.inArray($(this).html(), ['C', 'D', 'E', 'F']) !== -1){
        $(this).hide();
    }
});
Источник

Если я понял, что вы хотите, это должно работать:

$(document).ready(function(){
    $('.option').each( function(i,e) {
        var current = $(e).html();
        if (current == "C" || current == "D" || 
            current == "E" || current == "F") {
           $(e).hide();
        }
});
Источник

Я вижу, вы используете JQuery. Когда вы оборачиваете некоторый класс с помощью функции jQuery, такой как $('. Option'), вы получите набор элементов, то есть он будет связываться со всеми этими элементами, обернутыми в специальные классы jQuery, которые предлагают вам большую функциональность

Лучший способ выполнить итерацию набора элементов через это использование функции jquery .each(), http://api.jquery.com/jQuery.each/ которая применяет функцию обратного вызова к каждому элементу. Что-то вроде этого:

$(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();
    });
}
Источник

Используйте функцию.each

$('.option').each(function(index) {
    if($(this).html == "E")
       $(this).hide();
});
Источник

Попробуй это:

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

Селектор JQuery '.option:contains("C.")' находит все теги option класс, который содержит текст "C.", и .hide() Функция скрывает каждый элемент в этой коллекции.

http://jsfiddle.net/b3hVw/

Или, альтернативно, в одном утверждении:

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

$('.option') находит все элементы с option учебный класс. .filter(function() { ... }) вызовите фильтры, которые перечисляют только те, для которых функция фильтра возвращает true, а затем вызов .hide() скрывает эти элементы.

http://jsfiddle.net/H7Lu8/

Источник
Другие вопросы по тегам