Javascript 将 if 语句放入附加 (' ' )？

Question

好吧，下面我让这个脚本完全按照我想要的方式执行；我用它为我的导航栏添加背景淡入/淡出，使用 jquery。

在我的设计中，我的导航栏的 ul 中每个 li 的末尾都有一个分隔符图像；添加这一点，我将跨度放入“sep”类中，其中包含我的 css，以将分隔符图像作为背景添加到正确的位置。

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

当前示例结构:( 项目 1 | 项目 2 | 项目 3 | )

我想要的是:(项目 1 | 项目 2 | 项目 3)

现在要在 javascript 中执行此操作，我需要以某种方式消除整个 "<span class="sep"></span>"或者只是 "class="sep""仅适用于我的最后一个 li 导航项目(其 ID 为 #n7)

所以我假设一个通用的方法是添加一个if语句，如果当前的li ID不是#n7(我的li 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 中都不起作用。