试图找到标题是否包含单词然后隐藏该父元素

时间:2013-05-08 20:32:35

标签: javascript jquery search for-loop

    var search_input = $('#input_search');
    var search_console = search_input.val();
    var header_console = $('.header');
    $('#enter_console').click(function() {
        var bodies = $('.reviews');
        for(var i=0;i<bodies.length;i++){
            var bodies = bodies[i];
            if($(bodies).find(header_console).filter(':contains("+search_console+")')) {
                bodies[i].hide();
            }
        }
    });

我试图找出主体是否有用户在输入中键入的单词。然后,如果那个主体有单词隐藏除了它之外的其余元素。谁能帮我???基本的HTML看起来像

<div id="2343" class="reviews">
    <h2>Animal Crossing: City Folk</h2><h3 class="header">Wii</h3>
    <p>8/10</p>
    <img src="http://i1231.photobucket.com/albums/ee512/Rukiafan23/1_zpsdab192dc.jpg" alt="{title}"> 
    <a href="http://www.wiiwarewave.com/t93-animal-crossing-city-folk">
        Read this Review
    </a>
    <div class="inner_box_review">----</div>
</div>

1 个答案:

答案 0 :(得分:4)

这应该这样做:

$('#enter_console').click(function() {
    var search_input = $('#input_search'),
        search_console = search_input.val(),
        header_console = $('.header');
    $('.reviews:has(.header:contains("' + search_console + '"))').hide();
});

修正了报价问题。

选择器说:“选择所有带有”评论“的元素,这些元素至少有一个包含search_console中存储的文本的后代。”

如果你需要反其道而且隐藏DONT所说的所有文字,你需要.not(:not()

$('#enter_console').click(function() {
    var search_input = $('#input_search'),
        search_console = search_input.val(),
        header_console = $('.header');
    $('.reviews').not(':has(.header:contains("' + search_console + '"))').hide();
});

$('#enter_console').click(function() {
    var search_input = $('#input_search'),
        search_console = search_input.val(),
        header_console = $('.header');
    $('.reviews:not(:has(.header:contains("' + search_console + '")))').hide();
});