jquery - 从选择中删除不需要的列表项

Question

我有一个 jsFiddle，它在选中某些复选框时显示文本。如果列表项是“邪恶的”，我不想显示它。

http://jsfiddle.net/mgaRw/15/

<ul class="filterThis">

<li class="red evil circle">
<h3>red evil circle</h3>
</li>

<li class="red circle">
<h3>red circle</h3>
</li>
.
.

​</p>

Answer 1

而不是选择所有列表元素：

var targets = $('.filterThis li')

你只选择那些不是邪恶的：

var targets = $('.filterThis li:not(.evil)')

Answer 2

if (!$(this).is('.evil'))

小提琴

作为旁注，UL（标签不再需要大写，它不是 1990 年）不能将 P 作为子元素，但应该将 LI 元素作为子元素，因此您的标记无效。

我可能会这样做：

$('.filters input[type="checkbox"]').on('change', function() {
    var checks1 = $('input[type="checkbox"]', '.filters ul:first').map(function() {
        if (this.checked) return this.value;
    }),
        checks2 = $('input[type="checkbox"]', '.filters ul:last').map(function() {
        if (this.checked) return this.value;
    });
    $('.filterThis li').each(function(i,elm) {
        var classes = elm.className.split(' '), 
            show = false;
        if (classes.length==2 && checks1.length>0 && checks2.length>0) {
            if ($.inArray(classes[0], checks1)!=-1 || $.inArray(classes[0], checks2)!=-1 && 
                $.inArray(classes[1], checks1)!=-1 || $.inArray(classes[1], checks2)!=-1) show=true;
        }
        $(elm).toggle(show);
    });
});​

FIDDLE（甚至修复了标记）

Answer 3

我认为您需要像下面那样修改迭代器以检查输入长度是否为 0

$.each(classList, function(index, item){
   var inputItem = $('input[value="'+item+'"]');
   if (!inputItem.length || inputItem.not(':checked').length) {
     include = false;
     return false;  
   }
});

演示：http: //jsfiddle.net/mgaRw/19/

Answer 4

为什么不动态创建<li>元素而不是过滤？不要把简单的事情复杂化！

<ul class="filters" id="shapes">
  <li><input type="checkbox" value="circle">Circle</li>
  <li><input type="checkbox" value="square">Square</li>
  <li><input type="checkbox" value="triangle">Triangle</li>
</ul>

<ul class="filters" id="colors">
  <li><input type="checkbox" value="red">Red</li>
  <li><input type="checkbox" value="blue">Blue</li>
  <li><input type="checkbox" value="yellow">Yellow</li>
</ul>

<ul class="result"></ul>​

喝了几杯咖啡后：

$('input[type="checkbox"]').on 'click', ->
  $list = $('ul.result')

  $list.empty()

  $.each $('#shapes').find('input'), ->
    return true unless $(this).is(':checked')
    shape = $(this).val()
    $.each $('#colors').find('input'), ->
      return true unless $(this).is(':checked')
      color = $(this).val()
      $list.append $('<li>').html("#{shape} #{color}")​​​​

小提琴