如果这 = 首先<li>使用 'xyz' 类，则运行函数

Question

我有一个包含6个项目的<ul>。每个项目都有一个规划、景观或环境类别。这些项目是页面上jQuery Cycle幻灯片的一部分。如果正在显示的列表项是具有特定类的第一个项，我打算在页面上显示一些内容。

正如你在下面看到的，我有两个"计划"类的列表项。如何检测显示的列表项是否是"计划"类的第一个？。

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"）{//这是第一个李。。。}

我不确定为什么第一个版本不起作用（可能是is方法的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/

Answer 2

应该能够只进行

$('li.xyz:first')

作为您的选择器。

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

希望这有帮助：

演示：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 5

根据您遇到的问题。。。使用before选项的参数，您希望下一张幻灯片而不是当前幻灯片，因为在this成为下一张之前，before会触发

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