Question

我有一个像这样的列表

<ul>

<li language="English"> Australia </li>
<li language="English"> America </li>
<li language="French"> France </li>
<li language="French"> Canada </li>
<li langauge="German"> Germany </li>

</ul>

我只想过滤并显示具有英语语言的列表。如何使用Jquery实现这一目标？

如果li有多个属性如<li language="English,French"> Canada </li>，那么策略是什么，我想在英语和法语国家显示加拿大。

感谢您发布的确切代码，因为我已经玩了hide（）而不是（）一段时间了。

Answer 1

这样的事情：

<li language="English"> Australia </li>
<li language="English"> America </li>
<li language="French"> France </li>
<li language="French English"> Canada </li>
<li langauge="German"> Germany </li>

$('li').not("[language*='English']").hide();

Answer 2

一个相对简单的解决方案，使用select元素来处理语言选择：

$('#language').change(function(){
    // storing the language chosen in the select element
    var v = this.value;
    /* iterates over all li elements, and hides them,
       then filters the matched elements to see which elements
       contain the relevant language in the 'language' attribute: */
    $('ul li').hide().filter(function(i){
        return this.getAttribute('language').indexOf(v) !== -1;
    // shows the elements that contain the relevant language:
    }).show();
});

JS Fiddle demo

或略有不同的方法：

$('#language').change(function () {
    var v = this.value;
    $('ul li').each(function(){
        var l = this.getAttribute('language');
        return $(this).toggle(l.indexOf(v) !== -1);
    });
});

JS Fiddle demo

以上两种方法都使用以下HTML：

<label for="language">Show:</label>
<select name="language" id="language">
    <option>English</option>
    <option>French</option>
    <option>German</option>
</select>
<ul>
    <li language="English">Australia</li>
    <li language="English">America</li>
    <li language="French">France</li>
    <li language="English French">Canada</li>
    <li language="German">Germany</li>
</ul>

顺便提一下，请注意最终li元素中“语言”的更正拼写。

此外，最好更正HTML以使用有效的（在HTML5下）data-*属性，例如data-language（使用显而易见的）：

<ul>
    <li data-language="English">Australia</li>
    <li data-language="English">America</li>
    <li data-language="French">France</li>
    <li data-language="English French">Canada</li>
    <li data-language="German">Germany</li>
</ul>

修改上面的代码，使用修改后的HTML：

$('#language').change(function(){
    // storing the language chosen in the select element
    var v = this.value;
    /* iterates over all li elements, and hides them,
           then filters the matched elements to see which elements
           contain the relevant language in the 'language' attribute: */
        $('ul li').hide().filter(function(i){
            return $(this).data('language').indexOf(v) !== -1;
            // shows the elements that contain the relevant language:
        }).show();
    });

JS Fiddle demo

$('#language').change(function () {
    var v = this.value;
    $('ul li').each(function(){
        var self = $(this),
            l = self.data('language');
        return self.toggle(l.indexOf(v) !== -1);
    });
});

JS Fiddle demo

参考文献：

Answer 3

就这样做

$("li:not([language*='English'])").hide();

参考 LIVE DEMO

HTML：

<ul>
    <li language="English"> Australia </li>
    <li language="English"> America </li>
    <li language="French"> France </li>
    <li language="French"> Canada </li>
    <li langauge="German"> Germany </li>
    <li language="English,French"> Canada1 </li>
</ul>

输出：

<li language="English"> Australia </li>
<li language="English"> America </li>
<li language="English,French"> Canada1 </li>

Answer 4

应该这样，使用“包含”属性选择器http://api.jquery.com/category/selectors/attribute-selectors/ -

$('li').not('[language*="English"]').hide();

这是一个小提琴 - http://jsfiddle.net/caySY/

Answer 5

您可以使用属性选择器： -

$('li[language]').hide(); //hide all with attribute language
$('li[language=English]').show() //show the ones with English

Answer 6

如果您的语言选择器中有多个字符串，请使用包含选择器

http://api.jquery.com/attribute-contains-selector/

$('li[language*="English"]').hide();

如何使用Jquery隐藏具有特定属性值的元素

6 个答案:

HTML：

输出：