Question

这个小搜索示例有效，但只是第一次。

如何清除p元素中的所有类，以便第二次搜索时，上一次搜索中的突出显示不显示？

<!DOCTYPE html>
<html>
    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load('jquery', '1.4.2');
            google.setOnLoadCallback(function() {
                $('#searchButton').click(function() {

                 //remove all added classes so we can search again
                 //jQuery.each($('p'), function() {
                    //$('#' + this).addClass('');
                 //}

                 $('p:contains("' + $('#searchText').val() + '")').addClass('highlight');
                });
            });
        </script>
        <style>
            p.highlight {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <input id="searchText" value="second" />
        <button id="searchButton">Search</button>
        <p>This is the first entry.</p>
        <p>This is the second entry.</p>
        <p>This is the third entry.</p>
        <p>This is the fourth entry.</p>
    </body>
</html>

Answer 1

您可以删除所有highlight上的p课程，然后在匹配的元素上再次执行hightlight。

$('p').removeClass('hightlight');

Answer 2

如果要删除所有类，可以在类上使用removeAttr，或将class设置为“”。所以......

$('#searchButton').bind('click',function(){
  $('p').removeAttr('class');
  // OR
  $('p').attr('class','');
});

使用“each（）”不是必需的，因为jQuery会自动对集合中的所有元素执行这些操作。

Answer 3

使用removeClass()删除该类，然后再次搜索并将该类添加到新匹配项中。我就是这样，我会使用filter()来搜索刚刚使用<p>而不是进行另一次$('p')调用的$(...)元素的选择：

$('#searchButton').click(function() {
    $('p')
        .removeClass('highlight')
        .filter(':contains("' + $('#searchText').val() + '")')
        .addClass('highlight');
});

Answer 4

使用removeClass

$('p').removeClass('highlight')将仅删除上一次搜索中的突出显示类 $('p').removeClass()将删除所有p的所有类

如何从$（'p'）集合中删除所有类？

4 个答案: