CODEWITHSUNDEEP
jquery
Sri Ram
Sri Ram

Reputation: 123

How to hide elements with specific attribute values with Jquery

I have a list like this

<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>

I just want to filter and display the list having language as English. How can I achieve this using Jquery?

And what would be the strategy if the li has multiple attributes like <li language="English,French"> Canada </li>, I want to display Canada for both English as well as French language speaking country.

Appreciate if you post exact code as I already played with hide() and not() for a while now.

Upvotes: 2

Views: 8892

Answers (6)

David Thomas
David Thomas

Reputation: 253318

A relatively simple solution, using a select element to handle the language-choice:

$('#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.

Or a slightly different approach:

$('#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.

Both the above work with the following 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>

Incidentally please note the corrected spelling of 'language' in the final li element.

Further, it'd be better to correct your HTML to use a valid (under HTML5) data-* attribute, such as data-language (to use the obvious):

<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>

And the above code amended, to use that modified 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.

References:

Upvotes: 1

sergioadh
sergioadh

Reputation: 1471

If you have multiple string in your language selector use the contains selector

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

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

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Just do this way

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

Refer 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>

OUTPUT:

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

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34416

Should go like this, using the "contains" attribute selector http://api.jquery.com/category/selectors/attribute-selectors/ - 

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

Here is a fiddle - http://jsfiddle.net/caySY/

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

Something like this:

<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();

Upvotes: 4

PSL
PSL

Reputation: 123739

You can use Attribute selector:-

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

Upvotes: 0

Related Questions