Question

$(function() {
$('#topSearchButton').on("click", function () {
    $('li[type*="COMPANY"],li[type*="BRANCH"],li:contains("Companies"), li:contains("Branch")').toggle("fast");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="topSearchButton" type="button" class="btn" value="click me">
<ul>
    <li><h3>Companies</h3></li>
    <li type="COMPANY">company1</li>
    <li type="COMPANY">company2</li>
    <li type="COMPANY">company3</li>
    <li><h3>Branches</h3></li>
    <li type="BRANCH">branch1</li>
    <li type="COMPANY">branch2</li>
    <li><h3>Documents</h3></li>
    <li type="Documents">Documents1</li>
    <li type="Documents">Documents2</li>
</ul>

此代码有效，但我想知道是否有更好或更有效的方法来查找元素？

Answer 1

是的。您可以在下一个单击按钮的ul中查找所有子li元素，除了一个带有类型文档且不包含使用null选择器的文档然后显示隐藏它们：

:not

<强>

<强> Working Demo

Answer 2

我个人会为你要隐藏的任何元素添加一个类。我还会在ul上添加一个ID，因此您在同一页面上使用其他ul元素时不会遇到任何问题。

<input id="topSearchButton" type="button" class="btn" value="click me">
<ul id="target">
    <li class="canhide"><h3>Companies</h3></li>
    <li class="canhide" type="COMPANY">company1</li>
    <li class="canhide" type="COMPANY">company2</li>
    <li class="canhide" type="COMPANY">company3</li>
    <li class="canhide"><h3>Branches</h3></li>
    <li class="canhide" type="BRANCH">branch1</li>
    <li class="canhide" type="COMPANY">branch2</li>
    <li><h3>Documents</h3></li>
    <li type="Documents">Documents1</li>
    <li type="Documents">Documents2</li>
</ul>

然后使用find()获取正确的元素：

$('#topSearchButton').on("click", function () {
    $('#target').find('.canhide').toggle('fast');
});

Here is a working example

作为旁注，我建议使用type属性，而不是使用JQuery可以获得的data-type属性：

var type = $('selector').data('type');

在click event-jQuery上找到<li>

2 个答案:

<强> Working Demo