Search code examples
jqueryhtmlcssjquery-selectbox

using Jquery in selectbox

Here is part of my HTML. This part will convert to a select box in small size Every li make a group , By click on each li members of groups will show, I used CSS filter for this . My question is how to rearrange member by clicking on each li in selectbox

        <ul class="nav nav-pills">
            <li class="filter" data-filter="all">
                <a href="#noAction">evey item</a>
            </li>
            <li class="filter" data-filter="web">
                <a href="#noAction">web</a>
            </li>
            <li class="filter" data-filter="photo">
                <a href="#noAction">photo</a>
            </li>
            <li class="filter" data-filter="identity">
                <a href="#noAction">identity</a>
            </li>
            <li class="filter" data-filter="news">
                <a href="#noAction">news</a>
            </li>
        </ul>

https://jsfiddle.net/amirhsh/0xtntxo6/ After selecting items in select box li depend on arrange

Solution

  • @amir, try the below code:

    HTML CODE:

    <ul class="nav nav-pills">
        <li class="filter" data-filter="all">
            <a href="#noAction">evey item</a>
        </li>
        <li class="filter" data-filter="web">
            <a href="#noAction">web</a>
        </li>
        <li class="filter" data-filter="photo">
            <a href="#noAction">photo</a>
        </li>
        <li class="filter" data-filter="identity">
            <a href="#noAction">identity</a>
        </li>
        <li class="filter" data-filter="news">
            <a href="#noAction">news</a>
        </li>
    </ul>


<div class="all web hide" > <p> some web contents </p> </div>
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all photo hide" > <p> some photo contents </p> </div>
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all photo hide " > <p> some photo contents </p> </div>
<div class="all web hide " > <p> some web contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p>
<div class="all web hide" > <p> some web contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p> 
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p>
<div class="all web hide" > <p> some web contents </p> </div>

    CSS CODE:

    .hide { display: none; }

    JS CODE: 

     $("li").click(function(){
    $("div").hide();
     var filter = $(this).data('filter');
    alert(filter);

    $("div").each(function(){
        if($(this).hasClass(filter)) {
             $(this).show();   
        }

    }); 
});

    Hope it will help you. :)