Question

如何在jQuery中按span内容过滤div？例如，如果选中了蔬菜或冬季复选框，则只显示文本洋葱内的div。

<div>
                <input type="checkbox" id="Fruit">
                <label for="Fruit">Fruit</label>
            </div>
            <div>
                <input type="checkbox" id="Vegetable">
                <label for="Vegetable">Vegetable</label>
            </div>
            <div>
                <input type="checkbox" id="Summer">
                <label for="Summer">Summer</label>
            </div>
            <div>
                <input type="checkbox" id="Winter">
                <label for="Winter">Winter</label>
            </div>

<div class="results">
  <div>
       <h1>Onion</h1>
       <span>Vegetable</span>
       <span>Winter</span>
  </div>

  <div>
       <h1>Banana</h1>
       <span>Fruit</span>
       <span>Summer</span>
  </div>

   <div>
       <h1>Rock</h1>
       <span>Fruit</span>
  </div>

     <div>
       <h1>Orange</h1>
       <span>Summer</span>
  </div>

</div>

整个代码为here

Answer 1

您可以使用：contains选择器。 http://codepen.io/anon/pen/bVMgaY

$("input:checkbox").on('click', function(event){
  $("div.results").children().hide();
  $("input:checked").each(function(){
     $("span:contains('" + $(this).prop('id') + "')", 'div.results').parent('div').show();
  });
});

jQuery - fiter按内容划分

1 个答案: