jq修改li显示隐藏报错？

Question

$('#city').on('change',function(){

    var s=$("#header_right_imgs_ul>li");
    for(var i=0;i<s.length;i++){
        if(s[i].className!= $(this).val()) {
            console.log(s[i].className);
            s[i].css({"display":"none"});
        }
    }

})

---

---

以上代码li是通过ajax从后台获取动态渲染到#header_right_imgs_ul里的，#city为一个select 下拉框，每个li都有class 名字有的不一样，我想做在select选中的时候li class名和select选中值不一致的li隐藏，console.log(s[i].className);输出这个可以成功获取到每个Li，但s[i].css({"display":"none"});为什么改不了，应该怎么写 求路过前辈指点 谢谢～～！

Answer 1

来个全jQ的：

$('#city').on('change', function(){
    var s = $('#header_right_imgs_ul').children('li'),
        v = $(this).val();
    s.each(function(i, ele){
        if (ele.hasClass(v)) {
            console.log(ele.get(0).className);
            ele.hide();
        }
    })
})

1. 其它答案说了，jQ对象的数组成员会返回原生DOM对象；另外用.get()也能拿到原生对象
2. 显示隐藏这个需求，用jQ的.show()和.hide()来做是最好的，因为会自动帮你存住对象之前的display值（新手常会碰到一个display不为block的东西，做了一遍hide之后再用display:block，然后“咦？为啥样式变了？”），其次的方案是在css里写一个.hide { display: none; }的类，然后用.addClass()去做
3. jQ的each很好用，循环jQ对象的时候可以用.each()，如果是数组或者对象的话，用$.each()就行了
4. 在一个jQ对象集合里返回个别对象，可以用.eq()
5. 其它不熟的API去查文档

Answer 2

因为s[i]是原生dom对象，不是jquery对象，可以改成s[i].style.display = "none"

Answer 3

s[i]在这个地方是原生dom对象，不是jquery对象，可以按照楼上说的做法，也可以使用将原生dom对象转化为jquery的方式$(s[i]).css("display","none")

Answer 4

s[i].style.display = "none"

Answer 5

s.eq(i).css即可

看你的需求，应是s.eq(i).hide()

Answer 6

他们说的基本都差不多了，看原理的话，就看他们。我来写的简单点

$('#city').on('change',function(){
    var _class = $(this).val();
    var s=$("#header_right_imgs_ul>li").hide().filter("."+_class).show();
})