如果这=第一个<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")){//这是第一个......}

我不确定为什么第一个版本不起作用(可能是jQuery扩展伪类与方法的问题???).

使用$(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/