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/