Question

我试图使用UL来过滤掉一堆Div，我们的想法是你选择，例如＆＃34; Fashion＆＃34;从UL然后一些JQuery将过滤div以隐藏任何不包含...

<span>Fashion</span>

这里的（尝试a）工作示例......

https://jsfiddle.net/m1oL185r/

HTML ...

<div class="container-fluid selectors middle">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <ul class="sort">
                        <li id="filterCat">Sort By: Category</li>
                        <li id="filterLoc">Sort By: Location</li>
                    </ul>
                    <ul class="subselectors-category">
                        <li class="clickable">Business Services</li>
                        <li class="clickable">Online Retail</li>
                        <li class="clickable">Industrial</li>
                        <li class="clickable">Food</li>
                        <li class="clickable">Wholesale</li>
                        <li class="clickable">Fashion</li>
                    </ul>
                    <ul class="subselectors-location">
                        <li class="clickable">Location 1</li>
                        <li class="clickable">Location 2</li>
                        <li class="clickable">Location 3</li>
                        <li class="clickable">Location 4</li>
                        <li class="clickable">Location 5</li>
                        <li class="clickable">Location 6</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container posts">
        <div class="row">
            <div class="col-xs-12 col-sm-4">
                <h2>ABC.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Fashion</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <h2>ABC.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Food</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <h2>Bav.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Business Services</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <h2>BAN.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Online Retail</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <h2>adada.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Online Retail</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <h2>adadadad.COM</h2>
                <img src="/img/success1.jpg" class="img-responsive" />
                <div class="blueBG">
                    <span>Online Retail</span>
                    <p>It’s not everyday you help such a dynamic company. Find out how we helped Bianchi set up their dream website.</p>
                    <div class="right">
                        <a href="#">Take a look</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

... JQUERY

$(document).ready(function () {

            $("#filterCat").click(function () {
                $(".subselectors-category").addClass("show");
                $(".selectors").addClass("left");
                $(".subselectors-location").removeClass("show");
            });

            $("#filterLoc").click(function () {
                $(".subselectors-category").removeClass("show");
                $(".selectors").addClass("left");
                $(".subselectors-location").addClass("show");
            });


            //-- Filter --//
            $('.clickable').click(function () {
                var filter = $(this).text();
                if (('.posts span').text == (filter)) {
                    m.parent.show();
                }
                else {
                    m.parent.hide();
                }
            });
        });

任何洞察我做错的事情都会很棒。

Answer 1

基本上，你要做的是：

$('.clickable').click(function () {
   var filter = $(this).text();                    
   $('.posts .blueBG').parent().hide();
   $('.blueBG').filter(function(){
       return $('span',this).text() == filter;
   }).parent().show();
});

实例：https://jsfiddle.net/hrz30mhw/

我建议你将班级blueBG更改为更具描述性 - 班级中的颜色不是一个好选择（有一天你可能希望它变成绿色！）

Answer 2

解决方案

我想你是在尝试这个：

//-- Filter --//
$('.clickable').click(function () {
  var filter = $(this).text();
  $('.posts span').each(function() {
    if ($(this).text() == filter) {
      $(this).parent().parent().show();
    }
    else {
      $(this).parent().parent().hide();
    }
  });
});

这似乎是你想要/理解的逻辑。这是jFiddle： https://jsfiddle.net/005ct90p/5/

简单改进

我不会依赖＆＃39; span＆＃39;单独。我会为它添加一个类，如下所示：

<span class="tag">Food</span>

哪个会生成正确的jQuery：

//-- Filter --//
$('.clickable').click(function () {
  var filter = $(this).text();
  $('.posts span.tag').each(function() {
    if ($(this).text() == filter) {
      $(this).parent().parent().show();
    }
    else {
      $(this).parent().parent().hide();
    }
  });
});

如何过滤一组div？

2 个答案:

解决方案

简单改进