创建JQuery div类过滤器不起作用

时间:2013-07-22 08:10:26

标签: javascript jquery

我正在尝试使用隐藏所有div的JQuery进行过滤,然后根据其中称为“品牌”的类显示div,我设法让它隐藏所有div但是它不会显示匹配的类。

我在声明中添加的警告显示,所以我认为它可能与父节目有关,有没有人有任何想法?

html:

<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right" title="" data-original-title="">
    <div class="section-features" style="display: none;">
        <p><i class="icon-star"></i> protective, waterproof lid</p>
        <p><i class="icon-star"></i> enhanced wooden coating</p>
        <p><i class="icon-star"></i> long lasting materials</p>
        <p><i class="icon-star"></i> 2 year warranty</p>
        <p><i class="icon-star"></i> includes durable bag</p>
    </div>

    <div class="brand tp" style="display: none;"></div>
    <div class="price" style="display: none;"> £47.99</div>
    <a href="Garden-Games-Picnic-Table-Sandpit-6407.html">
        <img src="picnic_table_sandpit.jpg" title="Garden Games Picnic Table Sandpit" alt="Garden Games Picnic Table Sandpit" width="220">
        <h3 align="center">Garden Games Picnic Table Sandpit</h3>
        <p align="center">
            <span> was: £69.99</span>
            <span> Now:  £47.99</span>
            <span class="button">More Info</span>
        </p>
        </a>
    <a name="a6407"></a>
</div>

/ \有大约20个div这样的不同品牌类例如class =“brand garden”

Js:

function brand(string){
    var brand = string;
    $('.section-link').hide();
    if ($('.section-link').children('.brand').hasClass(brand)) {
        alert(brand);
        $(this).parent().show();
    }
}

我也在通过Chrome网址栏javascript: brand("tp");

进行测试

任何帮助非常感谢, 西蒙

1 个答案:

答案 0 :(得分:4)

你需要在这里使用多个选择器,因为你需要获取同样具有指定类的.brand个元素

function brand(string){
    var brand = string;
    $('.section-link').hide();
    $('.section-link').children('.brand.' + brand).parent().show();
}

演示:Fiddle

相关问题