在jquery中浏览列表的任何简单或更短的方法？答案

【问题标题】：Any easy or shorter way of going through list in jquery?在jquery中浏览列表的任何简单或更短的方法？
【发布时间】：2013-11-19 20:41:10
【问题描述】：

基本上，我有 4 个列表。无论单击哪个列表，我都想添加一个类，如果单击了其他列表，我想从其他列表中删除该类。只想将它应用到已点击的那个。

  <script>
    $(document).ready(function(){
      $("#li1").click(function(){
            document.getElementById('li1').classList.add('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');
      });

      $("#li2").click(function(){
            document.getElementById('li2').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li3").click(function(){
            document.getElementById('li3').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li4").click(function(){
            document.getElementById('li4').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');   
      });


    });
</script>


    ---HTML----
    <ul>
         <li id="li1"> some text here </li>
         <li id="li2"> some text here </li>
         <li id="li3"> some text here </li>
         <li id="li4"> some text here </li>
    </ul>

【问题讨论】：

请发布您的 HTML。如果你使用 jQuery，你为什么要做document.getElementById('li4').classList.add('focus') 之类的事情，而你可以做$('#li4').addClass('focus')？
我已经更新了我的帖子并添加了 HTML，它只是一个基本的 UL。请多多包涵，我是 javascript / jquery 的新手。

标签： jquery list class

【解决方案1】：

$('li').click(function(event){
  $('li').removeClass('focus');
  $(event.target).addClass('focus');
})

这会删除所有“焦点”类，然后将其添加到单击的 li。

更多阅读： http://api.jquery.com/event.target/

【讨论】：

【解决方案2】：

没有看到你的标记：

var $lists = $('[id^="li"]');

$lists.click(function(){
  $lists.removeClass('focus');
  $(this).addClass('focus');
});

【讨论】：

【解决方案3】：

您可以尝试这样的事情 (DEMO)

HTML：

<ul id="list1">
    <li class='current'>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul id="list2">
    <li class='current'>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JS::

$('#list1 > li').add('#list2 > li').on('click', function(){
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
});

或者，也许是这个 (DEMO)

$('#list1 > li').add('#list2 > li').on('click', function(){
    $('ul[id^="list"] > li').siblings().removeClass('current');
    $(this).addClass('current');
});

【讨论】：