If this = first
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'); 
}
}

It should be noted, in addition to using `first` you can use the JQ selector `first-child` if you wish this occur on multiple instances. And, assuming you only wanted to apply styles (and not effects/functions), you could use the CSS `first-child` pseudo-class. — Moses, Mar 09 '12 at 01:07

Chandu · Accepted Answer · 2012-03-09T16:32:13.680

5

~~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/

edited Mar 09 '12 at 16:32

answered Mar 09 '12 at 01:01

Chandu

81,493
19
133
134

Dang, I really wanted this one to work... For some reason when I ad the pseudo class it breaks. I modified my function to `if($(this).is('#slideShow ul li.planning')){`... and it continues to work. But if I do `if($(this).is('#slideShow ul li.planning:first')){` the items in the if statement don't execute. – Ofeargall Mar 09 '12 at 01:32
I tried this last night but kept getting a timeout error over at jsFiddle. Here's the fiddle: http://jsfiddle.net/73y2R/1/ – Ofeargall Mar 09 '12 at 15:50
@Cybermate Well done! Thank you, thank you. It never cases to amaze me what simple things will cripple a piece of code. – Ofeargall Mar 09 '12 at 16:42

score 0 · Answer 2 · answered Mar 09 '12 at 01:02

0

Should be able to just do

$('li.xyz:first')

As your selector.

answered Mar 09 '12 at 01:02

Nathan Cox

1,299
13
24

score 0 · Answer 3 · answered Mar 09 '12 at 01:05

0

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();

answered Mar 09 '12 at 01:05

Fareesh Vijayarangam

5,037
4
23
18

score 0 · Answer 4 · answered Mar 09 '12 at 01:15

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 :-)

score 0 · Answer 5 · answered Mar 09 '12 at 01:58

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');

 }

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

5 Answers5

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