Hide div with special class contain in another div

Question

mano7859 0 Newbie Poster

11 Years Ago

Hi :)

I don' know how to hide some div with special class.

This is my html code:

<div id="subMain">
    <div id="archivesResult_Content">
        <div id="box">
        <div id="categorie" cat="2">
            ...
        </div>
        </div>
        <div id="box">
            <div id="categorie" cat="14">
                ...
            </div>
            <div id="categorie" cat="5">
                ...
            </div>
            <div id="categorie" cat="14">
                ...
            </div>
        </div>
        <div id="box">
            <div id="categorie" cat="13">
                ...
            </div>
        </div>
    </div>
</div>

This is my jquery code:

$(function(){
    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');

        if(catChoice == "00"){
                    $("#subMain  #archivesResult_Content #box #categorie").slideDown();
                    return;
        }

        var i=0;

        $("#subMain  #archivesResult_Content #box #categorie").each(function(){

            if($(this).attr("cat") != catChoice){      

                $(this).slideUp();

            }else{

                i++;
                $(this).slideDown();

            }

        });

   });

});

The problem is:
For example, if an user clicks on cat '14', all div different of '14' will disappear but not the box associated. In this example, the box with '<div id="categorie" cat="2">' will still display without '<div id="categorie" cat="2">'. That i would like that this box with the '<div id="categorie" cat="2">' disappear.

I hope i was clear ;)

Thanks a lot for your help :)

javascript

2 Contributors
9 Replies
285 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by AleMonteiro

AleMonteiro 238 Can I pick my title?

11 Years Ago

First of all, you shoudln't have multiple elements with the same ID. ID selectors only return the first element. So, use class instead of id in this case: <div class="categorie">

Then you should use the attribute selector of jQuery for selectiong an element with an specific cat attribute. Like this: $("#subMain).find("div.categorie[cat=2]")

AleMonteiro 238 Can I pick my title?

11 Years Ago

You didn't correct the issues that I told you.

AleMonteiro 238 Can I pick my title?

11 Years Ago

See if this works:

$(function(){

    $('ul#groupCat li').click(function(){

        var 
            catChoice= $(this).attr('cat'),
            $subMain = $("#subMain");

        if(catChoice == "00"){
            $subMain.find("div.box").slideDown();
            $subMain.find("div.categorie").slideDown().removeAttr('catsort');
            return;
        }

        $subMain
            .find('div.categorie[cat!="' + catChoice + '"]') // div categorie who is not the catChoice
                .slideUp();

        $subMain
            .find("div.categorie[cat=" + catChoice + "]") // div categorie who is the catChoice
                .attr('catsort', 'Yes') 
                .slideDown() 
            .parent() // box who has the catChoice categorie
                .slideDown();

        $subMain
            .find('div.box:not(:has(div.categorie[cat="' + catChoice + '"]))') // Only boxes that does not have the categorie
                .slideUp();
    }); 

});

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mano7859 0 Newbie Poster · Answer 1 · 2013-02-07T22:33:39+00:00

Hi AleMonteiro and thank you for your answer, :))

Sorry to answer you late but i take another path. :/

I did a new jquery function, it works half.

For example, if i select '14', all <div id="categorie" cat="14"> will be displayed and the box associated will be displayed and the other div without "cat 14" will not be displayed.

The problem is if i select '5', the <div id="categorie" cat="5"> and the box associated will not be display.

I'm explaining more, in this code:

<div id="box">
    <div id="categorie" cat="14" catsort="Yes">
        ...
    </div>
    <div id="categorie" cat="5" catsort="No">
        ...
    </div>
    <div id="categorie" cat="14" catsort="Yes">
        ...
    </div>
</div>

Here my jquery function doesn't display the first '<div id="categorie" cat="14" catsort="Yes"></div>' only the last div

Perhaps an idea?

Thanks a lot for your help :)

This is my new jquery function:

$(function(){

    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');

        if(catChoice == "00"){
                $("#subMain  #archivesResult_Content #box").slideDown();
                $("#subMain  #archivesResult_Content #box #categorie").slideDown();
                $("#subMain  #archivesResult_Content #box #categorie").removeAttr('catsort');
                return;
        }


        var i=0;

        $("#subMain  #archivesResult_Content #box #categorie").each(function(){

            if($(this).attr("cat") != catChoice){      

                $(this).slideUp();
                $(this).attr('catsort','No');

            }else{

                i++;
                $(this).slideDown();
                $(this).attr('catsort','Yes');
            }

            var catSortAttr=$(this).attr('catsort');;

            if(catSortAttr=="Yes"){
                $(this).parent().slideDown();
            }else{
                $(this).parent().slideUp();
            }

        });

   });

});

mano7859 0 Newbie Poster · Answer 2 · 2013-02-07T23:53:26+00:00

Shame on me ! Sorry...

Even if i did I got the same problem. :(

You said me:

Like this: $("#subMain).find("div.categorie[cat=2]")

The problem is that cat=X is dynamic (php). It changes between categories.

An idea, please ?!

This is my Html code:

  <div id="subMain">
        <div id="archivesResult_Content">
            <div class="box">
            <div class="categorie" cat="2">
                ...
            </div>
            </div>
            <div class="box">
                <div class="categorie" cat="14">
                    ...
                </div>
                <div class="categorie" cat="5">
                    ...
                </div>
                <div class="categorie" cat="14">
                    ...
                </div>
            </div>
            <div class="box">
                <div class="categorie" cat="13">
                    ...
                </div>
            </div>
        </div>
    </div>

And my jquery script modified:

$(function(){


    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');


        if(catChoice == "00"){
                $("#subMain  #archivesResult_Content .box").slideDown();
                $("#subMain  #archivesResult_Content .box .categorie").slideDown();
                $("#subMain  #archivesResult_Content .box .categorie").removeAttr('catsort');
                return;
        }
        var i=0;


        $("#subMain #archivesResult_Content .box .categorie").each(function(){

                if($(this).attr("cat") != catChoice){      


                $(this).slideUp();
                $(this).attr('catsort','No');


                }else{


                i++;
                $(this).slideDown();
                $(this).attr('catsort','Yes');

                }



            var catSortAttr=$(this).attr('catsort');;



            if(catSortAttr=="Yes"){
                $(this).parent().slideDown();
            }else{
                $(this).parent().slideUp();
            }
        });




    }); 


});

AleMonteiro 238 Can I pick my title? · Answer 3 · 2013-02-08T01:18:15+00:00

Try something like this(not tested):

$(function(){

    $('ul#groupCat li').click(function(){

        var 
            catChoice= $(this).attr('cat'),
            $subMain = $("#subMain");

        if(catChoice == "00"){
            $subMain.find("div.box").slideDown();
            $subMain.find("div.categorie").slideDown().removeAttr('catsort');
            return;
        }

        $subMain
            .find('div.categorie[cat!="' + catChoice + '"]') // div categorie who is not the catChoice
                .slideUp();

        $subMain
            .find("div.categorie[cat=" + catChoice + "]") // div categorie who is the catChoice
                .attr('catsort', 'Yes') 
                .slideDown() 
            .parent() // box who has the catChoice categorie
                .slideDown()
            .siblings("div.box") // other boxes
                .slideUp();
    }); 

});

mano7859 0 Newbie Poster · Answer 4 · 2013-02-08T01:59:47+00:00

Thanks for your answer.

Your code is pure better than mine ;)

But it doesn't work. :(

I'm explaining:

If we have this html code:

<div id="subMain">
    <div id="archivesResult_Content">
        <div id="archivesResult_title">
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="14">
            <div class="categorie" cat="13">
        </div>
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="3">
            <div class="categorie" cat="13">
        </div>
    </div>
</div>

If we choose 'cat 14' is perfect all the other div don't display
If we choose 'cat 3' is perfect all the other div don't display
But if we choose 'cat 13' all div disappear

An idea ?!

mano7859 0 Newbie Poster · Answer 5 · 2013-02-09T00:06:46+00:00

HI AleMonteiro,

I've tested before answering you...

Thanks a lots it works very nice. Honestly, I could never find this code. You were very patient with me. thanks again.

With your help, i've learned more with Jquery.
You're genius !! :D

Thanks again :D

AleMonteiro 238 Can I pick my title? · Answer 6 · 2013-02-09T16:02:08+00:00

You are welcome.
Good luck with your learning.
Seeya