$(.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();
});
})
Альтернативные ссылки для расследования
$('.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()
Функция скрывает каждый элемент в этой коллекции.
Или, альтернативно, в одном утверждении:
$(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()
скрывает эти элементы.