Question

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

如下所示，我有两个列表项目，其中包含“计划”类。如何检测显示的列表项是否是第一个具有“计划”类的项目？。

Cycle给了我一个很棒的功能来帮助我，我只是不确定如何在我的帮助函数中编写if()来触发我想在页面上显示的项目。

非常感谢任何帮助！

这是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

<德尔> 如果（$（本）。是（ “li.planning：第一”））{ //这是第一个...... }

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

希望这会有所帮助：

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

问候:-)

Answer 5

根据您遇到的问题...使用before选项的参数，您希望在before成为下一张幻灯片之前，下一张幻灯片不是当前的幻灯片this触发器< / p>

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

 }

如果这=第一个<li>，类为'xyz'，则运行函数</li>

5 个答案: