无法正确选择JQuery

Question

我试图在单击它时将边框添加到li中。这是我的代码。

<div class="noselect round" id="teach_edit_navigation_holster"> 
<ul id="teach_edit_navigation"> 
    <li id="edittab_one" class="teach_nav_roundleft"> 
     <span>Item</span> 
    </li>  
    <li class="" id="edittab_two"> 
     <span>Item</span> 
    </li> 
    <li class="" id="edittab_three"> 
     <span>Documents</span> 
    </li> 
    <li class="" id="edittab_four"> 
     <span>Item</span> 
    </li> 
    <li class="" id="edittab_five"> 
     <span>Item</span> 
    </li> 
    <li class="teach_nav_roundright" id="edittab_six"> 
     <span>Item</span> 
    </li>     
</ul> 
</div> 

这里是jquery。我希望整个li箱子有一个边框，而不是跨度。下面的代码在跨度上放置一个边界。我不知道如何选择实际的李。谢谢！

$(document).ready(function() { 
    $('#edittab_two_s, #edittab_three_s, #edittab_four_s, #edittab_five_s, #edittab_six_s').hide(); 
// $('#teach_edit_navigation').find('#edittab_one').css({ 
//   "background-color": "black" // set highlight to first item on page "home" 
//  }); 
}); 

$('#teach_edit_navigation_holster li').click(function() { 
    var Vinfotab = this.id + '_s', 
     $this = $(this); 
    $('.edittab:visible').fadeOut('fast', function() { 
     $('#' + Vinfotab).fadeIn('fast'); 
     $('#teach_edit_navigation_holster li span').css({ 
      "border": "none" // reset all to default color 
     }); 
     $this.find('span').css({ 
      "border-bottom": "1px solid black" // set highlight to this element only 
     }); 
    }); 
}); 

Answer 1

的<li>由$this表示。这应该为你工作：

$('#teach_edit_navigation_holster li').css({ // !!! remove span 
    "border": "none" // reset all to default color 
}); 
$this.css({ // !!! remove .find('span') 
    "border-bottom": "1px solid black" // set highlight to this element only 
}); 

Answer 2

更改此：

$this.find('span').css({ 
    "border-bottom": "1px solid black" // set highlight to this element only 
}); 

对于此：

$this.css({ 
    "border-bottom": "1px solid black" // set highlight to this element only 
});