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>。英語とフランス語を話す国の両方でカナダを表示したいと考えています。

しばらくの間 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

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ちなみに、最後の要素の「language」のスペルが修正されていることに注意してください。

さらに、次のような有効な (HTML5 の下で)data-*属性を使用するように HTML を修正することをお勧めします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

「contains」属性セレクターhttp://api.jquery.com/category/selectors/attribute-selectors/を使用して、このようにする必要があります-

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

ここにフィドルがあります - http://jsfiddle.net/caySY/

于 2013-05-13T18:25:14.383 に答える
0

言語セレクターに複数の文字列がある場合は、contains セレクターを使用します

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

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