If this = first <li> with the class of 'xyz' then run function

Question

I've got a <ul> with 6 items. Each item has a class of either planning, landscape or environmental. The items are part of a jQuery Cycle slideshow on the page. What I am intending to do is show something on the page if the list item that is being displayed is the first item with a specific class.

As you can see below, I have two list items with the class of 'planning'. How would I detect if the list item being displayed is the first with the class of 'planning'?.

Cycle gives me a great little function to help me, I'm just not sure how to write the if() inside my helper function to trigger the item I want to display on the page.

Any help is greatly appreciated!

** Edit ** Here's the jsFiddle: jsfiddle.net/73y2R/1

Here's the 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>

And the helper function:

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")){ //This is the first li... }

Am not sure why the first version is not working (may be issues with jQuery extension pseudo classes with is method ???).

Use $(this).is($("li.planning:first")) instead of $(this).is("li.planning:first") (We are passing a jQuery object to the is method instead of a string selector)

Try this:

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

Check this jsFiddle: http://jsfiddle.net/73y2R/2/

Answer 2

Should be able to just do

$('li.xyz:first')

As your selector.

Answer 3

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 4

Hope this helps:

DEMO: 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');
});

Regards :-) ​

Answer 5

Based on issues you are having... use the arguments of before option, you want the next slide not the current one as before triggers before this becomes the next slide

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

 }