Если this = first ‹li› с классом 'xyz', запустите функцию

У меня есть <ul> с 6 элементами. Каждый элемент имеет класс планирования, ландшафта или окружающей среды. Элементы являются частью слайд-шоу jQuery Cycle на странице. Что я собираюсь сделать, так это показать что-то на странице, если отображаемый элемент списка является первым элементом с определенным классом.

Как вы можете видеть ниже, у меня есть два элемента списка с классом «планирование». Как определить, является ли отображаемый элемент списка первым с классом «планирование»?

Cycle дает мне отличную маленькую функцию, чтобы помочь мне, я просто не уверен, как написать if() внутри моей вспомогательной функции, чтобы вызвать элемент, который я хочу отобразить на странице.

Любая помощь приветствуется!

** Изменить ** Вот jsFiddle: jsfiddle.net/73y2R/1

Вот html:

<ul>
    <li class="planning">
        <img src="images/pl_slide1.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="planning">
        <img src="images/pl_slide1.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
        <img src="images/la_slide2.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
        <img src="images/la_slide2.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
        <img src="images/en_slide1.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
        <img src="images/en_slide1.jpg">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
  </ul>

И вспомогательная функция:

function onBefore() {
var theid = $(this).attr('class');
$('#services h4').removeClass('recolor');
$('#slideShow ul li').removeClass('showTitle');
if($(this).hasClass('planning')){
    $('#arrow').animate({'paddingLeft':'60px'});
    $('#' + theid).addClass('recolor');
} else if ($(this).hasClass('landscape')){
    $('#arrow').animate({'paddingLeft':'330px'});
    $('#' + theid).addClass('recolor'); 
} else if ($(this).hasClass('environmental')){
    $('#arrow').animate({'paddingLeft':'598px'});
    $('#' + theid).addClass('recolor'); 
}
}

jquery dom jquery-cycle
person Ofeargall    schedule 09.03.2012    source источник
comment
Следует отметить, что в дополнение к использованию first вы можете использовать селектор JQ first-child, если вы хотите, чтобы это происходило в нескольких экземплярах. И, предполагая, что вы хотите применять только стили (а не эффекты/функции), вы можете использовать псевдокласс CSS first-child.   -  person Moses    schedule 09.03.2012

Ответы (4)


arrow_upward
5
arrow_downward

if($(this).is("li.planning:first")){ //This is the first li... }

Не уверен, почему первая версия не работает (могут быть проблемы с псевдоклассами расширения jQuery с методом is ???).

Используйте $(this).is($("li.planning:first")) вместо $(this).is("li.planning:first") (мы передаем объект jQuery в метод is вместо строкового селектора)

Попробуй это:

if($(this).is($("li.planning:first"))){
 //This is the first li...
}

Проверьте этот jsFiddle: http://jsfiddle.net/73y2R/2/

person Chandu    schedule 09.03.2012
comment
Черт, я действительно хотел, чтобы это работало... По какой-то причине, когда я объявляю псевдокласс, он ломается. Я изменил свою функцию на if($(this).is('#slideShow ul li.planning')){... и она продолжает работать. Но если я сделаю if($(this).is('#slideShow ul li.planning:first')){, элементы в операторе if не будут выполнены. - person Ofeargall; 09.03.2012
comment
Я пробовал это прошлой ночью, но продолжал получать ошибку тайм-аута в jsFiddle. Вот скрипт: jsfiddle.net/73y2R/1 - person Ofeargall; 09.03.2012
comment
@Cybermate Молодец! Спасибо Спасибо. Меня никогда не удивляло, какие простые вещи могут повредить кусок кода. - person Ofeargall; 09.03.2012

arrow_upward
0
arrow_downward

Должен быть в состоянии просто сделать

$('li.xyz:first')

Как ваш селектор.

person Nathan Cox    schedule 09.03.2012

arrow_upward
0
arrow_downward

Надеюсь это поможет:

ДЕМО: http://jsfiddle.net/oscarj24/hwzyx/1/< /а>

jQuery:

$(document).ready(function(){
    var firstClass = $("ul li:first-child").attr('class');

    var isPlanning;
    ($.trim(firstClass) == 'planning') ? isPlanning = true : isPlanning = false;

    var isLandscape;
    ($.trim(firstClass) == 'landscape') ? isLandscape = true : isLandscape = false;

    var isEnvironmental;
    ($.trim(firstClass) == 'environmental') ? isEnvironmental = true : isEnvironmental = false;

    if(isPlanning)
        alert('First child class is planning');

    if(isLandscape)
        alert('First child class is landscape');

    if(isEnvironmental)
        alert('First child class is environmental');
});

С уважением :-)

person Oscar Jara    schedule 09.03.2012

arrow_upward
0
arrow_downward

Основываясь на проблемах, которые у вас есть... используйте аргументы опции before, вы хотите, чтобы следующий слайд не был текущим, поскольку before срабатывает до того, как this станет следующим слайдом

 function onBefore(curr, next, opts){
      var $next= $(next);
      var theid = $next.attr('class');

 }
person charlietfl    schedule 09.03.2012