jQuery: проверьте, существует ли div с определенным именем класса

235

Используя jQuery, я программно генерирую кучу divтаких:

<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>

Где-то еще в моем коде мне нужно определить, существуют ли эти DIV. Имя класса для div одинаково, но идентификатор меняется для каждого div. Есть идеи, как их обнаружить с помощью jQuery?

аватар
источник

Ответы:

424

Вы можете упростить это, проверив первый объект, который возвращается из JQuery следующим образом:

if ($(".mydivclass")[0]){
    // Do something if class exists
} else {
    // Do something if class does not exist
}

В этом случае, если в индексе first ( [0]) есть истинное значение , то предположим, что класс существует.

Изменить 04/10/2013: я создал тестовый пример jsperf здесь .

Shaz
источник
Хороший вопрос, в любом случае это просто поиск недвижимости. Я не забочусь о четырех персонажах, но это может быть яснее в зависимости от контекста ...
TJ Crowder
Я закончил тем, что использовал это решение, хотя есть и другие решения, которые тоже работают. Спасибо за быстрые ответы.
Аватар
1
Интересно, что вы можете подумать , бросать :firstтам помогло бы производительность (не знаю , если производительность является важным критерием для @itgorilla), но будет ли это действительно изменяется дико в браузере, по- видимому , потому что она изменяет собственные функции JQuery можно использовать сделать выбор. Вот тестовый случай, когда div существует , а вот тот, где его нет .
TJ Crowder
А если я не хочу выполнять код, если класс не существует?
Томас Себастьян
1
@ThomasSebastian Tryif (!$(".mydivclass")[0]){ /* do stuff */ }
Shaz
117

Вы можете использовать size(), но jQuery рекомендует использовать length, чтобы избежать издержек при вызове другой функции:

$('div.mydivclass').length

Так:

// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {

http://api.jquery.com/size/

http://api.jquery.com/length/

ОБНОВИТЬ

Выбранный ответ использует тест производительности, но он слегка ошибочен, поскольку он также включает в себя выбор элемента как часть теста, что здесь не то, что тестируется. Вот обновленный перф тест:

http://jsperf.com/check-if-div-exists/3

Мой первый прогон теста показывает, что поиск свойств выполняется быстрее, чем поиск по индексу, хотя в IMO это довольно незначительно. Я все еще предпочитаю использовать длину, так как для меня это имеет больше смысла в отношении намерений кода, а не в более кратких условиях.

Eli
источник
3
По ссылке, которую вы указали на инструмент на jsperf.com, в .lengthнастоящее время вы получаете лучшую среднюю производительность.
gmeben
Серверы мои потребности с наименьшим влиянием на производительность для проверки.
Дэвид О'Реган
77

Без jQuery:

Родной JavaScript всегда будет быстрее. В этом случае: (пример)

if (document.querySelector('.mydivclass') !== null) {
    // .. it exists
}

Если вы хотите проверить, содержит ли родительский элемент другой элемент с определенным классом, вы можете использовать любой из следующих. (пример)

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it exists as a child
}

Кроме того, вы можете использовать .contains()метод родительского элемента. (пример)

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it exists as a child
}

... и, наконец, если вы хотите проверить, содержит ли данный элемент только определенный класс, используйте:

if (el.classList.contains(className)) {
    // .. el contains the class
}
Джош Крозье
источник
57
$('div').hasClass('mydivclass')// Returns true if the class exist.
Хусейн
источник
3
Правда это альтернатива, но дорогая. Буду медленнее , чем подход , используемый в предыдущих ответах ( заметно медленнее, в некоторых браузерах), и имеет гораздо большее влияние памяти , а также (JQuery должен создать массив всех из divэлементов на странице, а затем вернуться и переберите их, чтобы увидеть, есть ли у них этот класс, все, чтобы выбросить массив в конце).
TJ Crowder
3
@tj hasClassна 33% быстрее, чем остальные селекторы здесь. Проверьте jsperf.com/hasclass00
Хусейн
1
@Hussein: Только с совершенно нереалистичным тестовым примером (два divэлемента), который обходит ту проблему, которую я выделил (построение массива). Попробуйте это с помощью нескольких divs : jsperf.com/hasclass00/2 Это на 63% медленнее для моей копии Chrome, на 43% медленнее для моей копии Firefox, на 98% (!) Медленнее в Opera. Но более того, имеет смысл, что составлять список элементов div и затем искать их медленнее, чем предоставлять механизму селектора всю необходимую информацию.
TJ Crowder
1
@ Хуссейн: Обратите внимание, что я был очень беспристрастен и представил сбалансированные контрдоказательства к вашим заявлениям. Мне жаль, если я коснулся нерва, это, похоже, произошло и в прошлый раз. Просто расслабьтесь, это не личное оскорбление, это техническое обсуждение. Толстая кожа и открытый разум полезны на StackOverflow.
TJ Crowder
1
@Hussein: Селектор HTML5 css означает, что это почти всегда будет худшим из возможных способов сделать это. -1 за не просто удаление вашего поста.
Стефан Кендалл
46

Вот решение без использования Jquery

var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
     // Class exists
}

ссылка ссылка

Рональд
источник
1
classList поддерживается только в IE10 +: caniuse.com/classlist . Вы должны добавить polyfill github.com/eligrey/classList.js или написать свои собственные методы
AFD
18

Это довольно просто ...

if ($('.mydivclass').length > 0) {
  //do something
}
methodofaction
источник
10

Чтобы проверить divэлементы явно:

if( $('div.mydivclass').length ){...}

Стефан Кендалл
источник
Это может быть немного медленнее, чем в .mydivclassзависимости от браузера и версии jQuery.
Стефан Кендалл
Верно, но ОП определенно сказал «jQuery - проверьте, существует ли div с определенным именем класса » (мой акцент), так что вы получите мой голос за то, что он первым включил divчасть селектора.
TJ Crowder
7

Простой код приведен ниже:

if ($('.mydivclass').length > 0) {
   //Things to do if class exist
}

Чтобы скрыть div с ID конкретного участника:

if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}
Джитендра Дамор
источник
3

Вот несколько способов:

1.  if($("div").hasClass("mydivclass")){
    //Your code

    //It returns true if any div has 'mydivclass' name. It is a based on the class name
    }

2. if($("#myid1").hasClass("mydivclass")){
    //Your code


    //  It returns true if specific div(myid1) has this class "mydivclass" name. 
    //  It is a  based on the specific div id's.
    }           
3. if($("div[class='mydivclass']").length > 0){
    //Your code

   // It returns all the divs whose class name is "mydivclass"
   //  and it's length would be greater than one.
    }

Мы можем использовать любой из способов, определенных abobe, исходя из требований.

Шео Дайал Сингх
источник
2
if ($(".mydivclass").size()){
   // code here
}

size()Метод просто возвращает количество элементов , которое выбирает селектор JQuery - в этом случае количество элементов с классом mydivclass. Если он возвращает 0, выражение ложно, и, следовательно, его нет, и если он возвращает любое другое число, div должен существовать.

Герман Шааф
источник
1
Зачем вызывать метод, когда есть lengthсвойство? Кроме того, это проверяет любой элемент с этим классом, а не только div. (Теперь, это может быть то, что имел в виду ОП, даже если не то, что он / она сказал.) См . Ответ Стефана Кендалла, который делает то, что на самом деле сказал ОП (хотя, опять же, они могли иметь в виду то, что вы сделали).
TJ Crowder
1
@TJ Crowder: Ну, личный вкус действительно - я просто чувствую, что метод size () есть - почему бы не использовать его. Дополнительные издержки при вызове функции (если вы не делаете это 1000 раз в цикле) настолько минимальны, что я бы предпочел немного ясности в коде. Что divкасается вашего второго замечания - да, я изменил свой первоначальный ответ, чтобы удалить деталь, по двум причинам: 1) селектор не ограничен тем фактом, что OP использует divэлемент (он может измениться в будущем), и 2) в В большинстве браузеров и версий jQuery, AFAIK, это должно быть быстрее.
Герман Шааф
"Я просто чувствую, что есть метод size () - почему бы не использовать его" Гм, хорошо. lengthСвойство есть, почему бы не использовать его? Но если это твои предпочтения, честно говоря. С другой стороны, я не знал, что ты отредактировал это. Если бы я собирался сделать это, я бы оставил это (опять же, он специально сказал: «... если div с ...» (мой акцент), а затем дополнительно упомянул, что если это не имеет значения, если это был divили нет, вы могли бы бросить эту часть. Но что угодно. :-)
TJ Crowder
@TJ Crowder: Да, я думаю, что мы думаем над этим.
Герман Шааф
@TJ Crowder: Но в мою защиту, хотя это не место для обсуждения: я чувствую, что есть size()способ дать понять, что вы подсчитываете количество элементов в селекторе jQuery, а не просто какой-либо старый массив. Но опять же, это только мое предпочтение.
Герман Шааф
2

проверьте, существует ли div с определенным классом

if ($(".mydivclass").length > 0) //it exists 
{

}
neebz
источник
2
if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}
stairie
источник
2
Кажется почти идентичным этому существующему ответу .
Панг
Да, это так ... но я попробовал этот ответ, и он не сработал. Когда я добавил сравнение в «undefined», оно показалось мне идеальным.
Stairie
2
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
Туан Чыонг Куанг
источник
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
Вишал Чходвани
2

В Jquery вы можете использовать как это.

if ($(".className")[0]){

   // Do something if class exists

} else {

// Do something if class does not exist

}

С помощью JavaScript

if (document.getElementsByClassName("className").length > 0) {

// Do something if class exists

}else{

    // Do something if class does not exist

}
Шаан Ансари
источник
2

Вот очень примерное решение для проверки класса (hasClass) в Javascript:

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}
Праздник Вахид Алиф
источник
1

Лучший способ в Javascript:

if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
JMJ
источник
1

if ($ ("# myid1"). hasClass ("mydivclass")) {// Делать что-либо}

Thilina
источник
Пожалуйста, объясните свой ответ
исполняемый файл
0

Используйте это для поиска по всей странице

if($('*').hasClass('mydivclass')){
// Do Stuff
}
Ароша Де Сильва
источник