Если это = first <li>с классом 'xyz', тогда запустите функцию

Question

У меня есть <ul> с 6 предметами.Каждый элемент имеет класс планирования, ландшафта или окружающей среды.Элементы являются частью слайд-шоу JQuery 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'); 
}
}

Answer 1

if ($ (this) .is ("li.planning: 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/

Answer 2

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

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

 }

Answer 3

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

ДЕМО: 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');
});

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

Answer 4

first_planning_child = $('li.planning')[0]; // and so on. I think the :first, :first-child, etc. selectors have cross browser issues, but I can't recall if that's correct.
$(first_planning_child).doStuff();

Answer 5

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

$('li.xyz:first')

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