小编Evg*_*niy的帖子

CSS伪类排序:nth-​​child和:not

我有以下代码:

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我用灰色条纹设计了这个列表:

.list li:nth-child(2n) {
    background-color: #ccc;
}
Run Code Online (Sandbox Code Playgroud)

效果很好,但后来我隐藏了一些li元素和条纹的顺序.小提琴

我尝试用以下方法更新选择器:not():

.list li:not(.hidden):nth-child(2n) {
    background-color: #ccc;
}
Run Code Online (Sandbox Code Playgroud)

但这没用.

任何人都可以建议如何订购伪类以保持条纹顺序?

css css-selectors pseudo-class css3

6
推荐指数
1
解决办法
266
查看次数

Jquery - 隐藏div的文本过滤器

我正在尝试使用jquery来创建一个实时过滤器来隐藏实时文本输入上的div.到目前为止,我有以下内容:

<input type="text" class="form-control" id="filter" name="filter" class="filter">
<div class="media">
    <div class="media-body>
        <h4>Apples</h4>
        ...
    </div>
</div>
<div class="media">
    <div class="media-body>
        <h4>Oranges</h4>
        ...
    </div>
</div>

<script>
    $('#filter').keyup(function () { 
        var filter = $("#filter").val();
        $('.media').each(function(i, obj) {
            if ($('this > .media-body > h4:contains(filter)').length === 0) {
                $(this).css("display","none");
            }
        });
    });
</script>
Run Code Online (Sandbox Code Playgroud)

我希望这个工作,以便只要有人输入'o',就会隐藏苹果div,但目前只要输入任何内容就会隐藏所有div.

另外,我怎样才能使它不区分大小写?

javascript css jquery

3
推荐指数
2
解决办法
5943
查看次数

排序时使空值始终存在

我使用下划线来排序数组.有没有办法使空值总是持续上升或下降?例如:

[
    { name: 'a', age: 1 }, 
    { name: 'z', age: 5 }, 
    { name: '', age: 1 }, 
    { name: 'v', age: 7 }
]
Run Code Online (Sandbox Code Playgroud)

会生产

[
    { name: 'a', age: 1 }, 
    { name: 'v', age: 7 }, 
    { name: 'z', age: 5 }, 
    { name: '', age: 1 }
]
Run Code Online (Sandbox Code Playgroud)

和降序将产生:

[
    { name: 'z', age: 5 }, 
    { name: 'v', age: 7 }, 
    { name: 'a', age: 1 }, 
    { name: '', age: 1 } …
Run Code Online (Sandbox Code Playgroud)

javascript underscore.js

3
推荐指数
1
解决办法
2078
查看次数

jQuery:添加1后只减1

我怎么能在jQuery中做到这一点.我已经有一个脚本可以在单击按钮后添加1.但是如果我再次点击按钮,我还想要一些应该减1的东西,然后将按钮恢复到原始状态.

这是我当前的jquery代码

$(document).ready(function() {
    $("#addMe").one('click',function(){
        var counter = parseInt($("#hiddenVal").val());

        counter++;

        $("#hiddenVal").val(counter);
        $("#theCount").text(counter);
        $("#addMe").toggleClass('active');
    });
});
Run Code Online (Sandbox Code Playgroud)

这是我的现场js小提琴:http://jsfiddle.net/jehzlau/7hv2eyv0/

现在,我点击后加1.该按钮只能点击一次才能添加+ 1.按钮的颜色会发生变化.这是我想要实现的第一个,它已经在工作了.

我现在唯一的问题是再次点击它后还原更改.

例如,如果你点击按钮,它现在是蓝色的,心脏是黑色的,数字是2.我想要的是如果你再次点击它,按钮将默认再次变为绿色,心脏变为白色,并且数字2到1.我只想反转第二次点击发生的事情.然后,如果我再次点击它(第三次点击),它将返回到2,然后按钮将变为蓝色,心脏将再次变黑.如果我再次点击它(第4次点击),它将再次恢复.等等等等...

这就是我想做的一切,但我无法做到.我希望有人能指出我正确的方向.:(

html javascript css jquery

2
推荐指数
1
解决办法
128
查看次数