Блог

Главная - Вопросы по программированию - jquery, если есть html-тег

jquery, если есть html-тег

#jquery

#jquery

Вопрос:

У меня есть некоторый код, p.words он скрыт, я пытался судить, если у next div есть span тег, тогда покажите p.words , иначе соблюдайте правило css.

Я использую jquery.next и jquery.find , чтобы судить $(this).parent().next('.col').find('span') , но он покажет все p.words , даже если у следующего div нет span тега

 <style>
.words{display:none;}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
    $('.words').each(function(){
        if($(this).parent().next('.col').find('span')){
            $(this).css('display','block');
        }           
    });
});
</script>
<a>Voodoo
   <p class="words"> 1</p><!-- do not show -->
</a>
<div class="col">
   <ul>
      <li>ATI Rage128 Pro</li><!-- no span tag -->
   </ul>
</div>
<a>NVIDIA
   <p class="words"> GeForce2 MX</p><!-- show --> 
</a>
<div class="col">
   <ul>
      <li>
         <span>NVIDIA GeForce2 MX 400</span><!-- have span tag -->
      </li>
      <li>
         <span>ATI 9200SE</span>
      </li>
   </ul>
</div>

Ответ №1:

Изменить

  if($(this).parent().next('.col').find('span')){

Для

  if($(this).parent().next('.col').find('span').length > 0){

Результатом $(this).parent().next('.col').find('span') является массив, который может быть или не быть пустым, но всегда будет разрешаться true в вашем состоянии.

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

1. У AlienWebguy все правильно; Я бы также упростил ваш код, чтобы использовать селектор next-siblings, но это суть вашей проблемы.

2. Промежутки не обязательно должны быть братьями и сестрами — он просто хотел знать, содержит ли следующий родной брат родителя какие-либо дочерние span узлы. Его последовательность выбора точна.

3. Одно небольшое замечание: вместо того, чтобы указанный выше селектор возвращал массив, он возвращает объект jQuery, который также имеет .length свойство: api.jquery.com/length

4. console.log($(this).parent().next('.col').find('span')) // []

5. console.log($(this).parent().next('.col').find('span')); выводит jQuery() для меня.

Ответ №2:

Я думаю, вы можете значительно упростить свой код с помощью этого:

http://api.jquery.com/next-siblings-selector/

Кроме того, я думаю, что источником вашей проблемы является то, что find возвращает пустой массив, который не оценивается как «false». Попробуйте этот код:

 if ($.find("doesnotexist")){console.log("Hi")}

Ответ №3:

Эта строка является виновником:

 if($(this).parent().next('.col').find('span')){

Если <span> теги не найдены, это не вернет false (он вернет пустой объект jQuery). Попробуйте добавить .length в конец вашего селектора; который вернет 0, если объект jQuery пуст (0 истинно равно false):

 if($(this).parent().next('.col').find('span').length){

Вот jsfiddle приведенного выше изменения в вашем коде: http://jsfiddle.net/qfqJZ /

Ответ №4:

Вам нужно внести небольшое изменение в свой оператор if:

 if ($(this).parent().next('.col').find('span').length > 0) {
   ...

http://jsfiddle.net/JMdC6/

Метки: