Question

好吧，所以下面我有这个脚本正是我想要的; 我正在使用它为我的导航栏使用jquery添加背景fadeIn / fadeOut。

根据我的设计，我在导航栏的每个li的末尾都有一个分隔符图像;添加，我将包含我的CSS的类“sep”放入其中，将分隔符图像作为背景添加到适当的位置。

现在我的问题是我将分隔符作为右对齐的背景图像，因此它出现在每个导航项的右侧（请参阅下面的基于文本的结构示例）并且我希望导航的最后一项没有分隔符。

当前示例结构：（第1项|第2项|第3项|）

我想要的是：（第1项|第2项|第3项）

现在要在javascript中执行此操作，我会以某种方式消除整个"<span class="sep"></span>"或仅"class="sep""我的上一个li导航项目（其ID为＃n7）

所以我假设一般的方法是添加一个if语句，如果当前的li ID不是#n7（我的ID从＃n1到＃n7，＃n7是最后的那个）那么它放入"<span class="sep"></span>"所以如果它是＃n7则不包含它

任何帮助都会很棒，谢谢。

Javascript代码：

$(document).ready(function () {

 //Append a div with hover class to all the LI
 $('#nav li').append('<div class="hover"><span class="sep"></span></div>');



 $('#nav li').hover(

  //Mouseover, fadeIn the hidden hover class 
  function() {

   $(this).children('div').fadeIn('1000'); 

  }, 

  //Mouseout, fadeOut the hover class
  function() {

   $(this).children('div').fadeOut('1000'); 

 }).click (function () {

  //Add selected class if user clicked on it
  $(this).addClass('selected');

 });

});

Answer 1

您可以使用:last-child伪类来选择最后一个孩子，使用:not()来选择除此之外的所有孩子。同样>不要降低多个级别，只能看看直接的孩子。

$('#nav > li:not(:last-child)').append('<div class="hover"><span class="sep"></span></div>');
$('#nav > li:last-child').append('<div class="hover"></div>');

这是一个标准的CSS选择器;在jQuery中，它总能工作，但作为一个CSS选择器，它在IE的任何当前版本中都不起作用。

Answer 2

$('#nav li').each(function() {
   var append_separator = (this != $('#nav li:last')[0]);
   $(this).append('<div class="hover">' + ((append_separator) ? '<span class="sep"></span>' : '') + '</div>')
});

jsFiddle example

Javascript将if语句放在append（''）中？

2 个答案: