Блог

Главная - Вопросы по программированию - Поиск диапазона с определенным классом после ввода с помощью jquery

Поиск диапазона с определенным классом после ввода с помощью jquery

#javascript #jquery

#javascript #jquery

Вопрос:

Я хотел бы спросить, как найти элемент span с определенным классом.

HTML выглядит следующим образом:

 <input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

Я пытаюсь так, но это не работает:

  $(".checkbox").on('click',function() {

                $(this).closest('span').find('.one').hide();  
            });

Комментарии:

1. Существует ли несколько элементов с одним классом? Если нет, то зачем его искать? Почему бы просто не скрыть класс one

2. Это не работает, потому что .closest() выполняется перемещение вверх, не в поперечном направлении (предки). (братья и сестры).

Ответ №1:

Две проблемы.

1) class="checkBox" != «.checkbox»

Классы зависят от регистра. Вам нужно это исправить.

2) Интервалы не являются предками флажка

Они братья и сестры. closest() работает путем перехода вверх по дереву DOM и поиска предков. Он не ищет братьев и сестер. Вы можете использовать siblings() , чтобы попытаться найти span.one

Ответ №2:

 $(".checkBox").on('click',function() {
        $(this).siblings('span').each(function(){
           if($(this).hasClass('one'))
           $(this).hide()
        })                
    });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

Вы можете использовать метод siblings для spans.

   $(".checkbox").on('click',function() {
        $(this).siblings('span').each(function(){
           if($(this).hasClass('one'))
           $(this).hide()
        })                
    });

Комментарии:

1. Зачем добавлять дополнительный hasClass метод и условие, когда селектор может быть span.one ?

2. если не проверить, это скроет весь диапазон

3. Нет …. если селектор siblings является span.one , он найдет только элементы, которые соответствуют этому. Выполнение селектора как простого span приводит к добавлению дополнительных условий и вызова метода, что является логическим раздуванием, то есть немного изобретением колеса, которое родственный селектор уже может сделать для вас

Ответ №3:

Вы можете использовать .siblings() селектор jQuery:

 $("input[type='checkbox']").on('click', function() {
  $(this).siblings('span.one').hide();
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

Обратите внимание, однако, что ваш $(".checkbox") неверен, поскольку ваш ввод не имеет этого класса, но имеет этот тип

Ответ №4:

closest перемещается вверх в dom, поэтому используйте next .

 $(".checkBox").on('click', function() {

  $(this).next('.one').hide();
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>