1

我有一个这样的清单

<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>，我想为英语和法语国家显示 Canada，那么策略是什么。

感谢您发布确切的代码，因为我已经使用 hide() 和 not() 玩了一段时间了。

4

6 回答 6

3

像这样的东西：

<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();
于 2013-05-13T18:28:54.450 回答
1

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

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

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

于 2013-05-13T18:25:14.383 回答
1

一个相对简单的解决方案，使用一个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 小提琴演示。

或者稍微不同的方法：

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

JS 小提琴演示。

以上两者都适用于以下 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 小提琴演示。

$('#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 小提琴演示。

参考：

于 2013-05-13T18:33:11.223 回答
1

就这样做

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

参考现场演示

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>
于 2013-05-13T18:40:53.763 回答
0

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

$('li[language]').hide(); //hide all with attribute language
$('li[language=English]').show() //show the ones with English
于 2013-05-13T18:26:08.877 回答
0

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

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

$('li[language*="English"]').hide();
于 2013-05-13T18:30:10.847 回答