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 здесь .


Хороший вопрос, в любом случае это просто поиск недвижимости. Я не забочусь о четырех персонажах, но это может быть яснее в зависимости от контекста ...
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 это довольно незначительно. Я все еще предпочитаю использовать длину, так как для меня это имеет больше смысла в отношении намерений кода, а не в более кратких условиях.


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


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 
{

}


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
}


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.