jQuery show() is not working properly

Question

I have an issue regarding expanding the child content of a li tag in jquery. My content is :

<ul id="0" class="set_preference">
    <li class="1stlevel">1st-Entertainment
        <ul>
            <li class="2ndlevel">2nd-Films
                <ul>
                    <li class="3rdlevel">3rdTollywood
                        <ul>
                            <li class="4thlevel">
                             <input type="checkbox" value="58" name="checkChild[]" class1="checkChild css-checkbox" id="cat_58">Bhooter bhabishyat</li>
                        </ul>
                    </li>
                    <li class="3rdlevel">3rdbollywood
                        <ul>
                            <li class="4thlevel">4th<input type="checkbox" value="60" name="checkChild[]" class1="checkChild css-checkbox" id="cat_60">krish</li>
                        </ul>
                    </li>
                    <li class="3rdlevel">3rdHollywood
                        <ul>
                            <li class="4thlevel">4th<input type="checkbox" value="62" name="checkChild[]" class1="checkChild css-checkbox" id="cat_62">Spiderman</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Television
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="1stlevel">1st-Celebrities
        <ul>
            <li class="2ndlevel">2nd-Film
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Music
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Public Life
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Sports
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Others
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-<input type="checkbox" value="18" name="checkChild[]" class1="checkChild css-checkbox" id="cat_18">Television
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="1stlevel">1st-Sports
        <ul>
            <li class="2ndlevel">2nd-Badminton
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Cricket
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Soccer
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Tennis
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="1stlevel">1st-Music
        <ul>
        </ul>
    </li>
    <li class="1stlevel">1st-Brands
        <ul>
        </ul>
    </li>
    <li class="1stlevel">1st-Cartoons
        <ul>
        </ul>
    </li>
</ul>

and I am trying in jquery like:

$j('.1stlevel').click(function(){
            $j('.2ndlevel').show();
            $j(this).children().css({"border":"1px solid red"});
//            $j(this).find('ul li').hide();
        });
        $j('.2ndlevel').click(function(){
            $j('.3rdlevel').show();
            $j(this).children().css({"border":"1px solid pink"});
//            $j(this).find('ul li').hide();
//            $j(this).find('ul li').hide();
        });
        $j('3rdlevel').click(function(){
            $j('.4thlevel').show();
            $j(this).children().css({"border":"1px solid green"});
//            $j(this).find('ul li ul li').hide();
            //$j(this).find('ul li').hide();
        });
        $j('.4thlevel').click(function(){
            $j(this).children().css({"border":"1px solid red"});
//            $j(this).find('ul li').hide();
        });
    });

But when I click on any level, next children of other tag is also opening. But my expectation is if I click on 3rdTollywood then Bhooter bhabishyat should open but neither krish nor Spiderman Please help me.

http://jsfiddle.net/9wnqj1dz/

@Nandha Kumar: They obviously are using `$j` as an alias for `jQuery` — iCollect.it Ltd, Sep 24 '14 at 15:37
Here is a starting jSFiddle for all to play with: http://jsfiddle.net/TrueBlueAussie/9wnqj1dz/3/ — iCollect.it Ltd, Sep 24 '14 at 15:39

score 1 · Answer 1 · edited May 23 '17 at 12:21

I remaned the classes to _1stlevel, etc. for this example, since technically classes shouldn't begin with a digit.

Use .find() to select elements under the clicked element.

$j = jQuery;

$j('._1stlevel').click(function(){
            $j(this).find('._2ndlevel').show();
            $j(this).children().css({"border":"1px solid red"});
        });
        $j('._2ndlevel').click(function(){
            $j(this).find('._3rdlevel').show();
            $j(this).children().css({"border":"1px solid pink"});
        });
        $j('_3rdlevel').click(function(){
            $j(this).find('._4thlevel').show();
            $j(this).children().css({"border":"1px solid green"});
        });
        $j('._4thlevel').click(function(){
            $j(this).children().css({"border":"1px solid red"});
        });

._2ndlevel, ._3rdlevel, ._4thlevel {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="_0" class="set_preference">
    <li class="_1stlevel">1st-Entertainment
        <ul>
            <li class="_2ndlevel">2nd-Films
                <ul>
                    <li class="_3rdlevel">3rdTollywood
                        <ul>
                            <li class="_4thlevel">
                             <input type="checkbox" value="_58" name="checkChild[]" class1="checkChild css-checkbox" id="cat_58">Bhooter bhabishyat</li>
                        </ul>
                    </li>
                    <li class="_3rdlevel">3rdbollywood
                        <ul>
                            <li class="_4thlevel">4th<input type="checkbox" value="_60" name="checkChild[]" class1="checkChild css-checkbox" id="cat_60">krish</li>
                        </ul>
                    </li>
                    <li class="_3rdlevel">3rdHollywood
                        <ul>
                            <li class="_4thlevel">4th<input type="checkbox" value="_62" name="checkChild[]" class1="checkChild css-checkbox" id="cat_62">Spiderman</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Television
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="_1stlevel">1st-Celebrities
        <ul>
            <li class="_2ndlevel">2nd-Film
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Music
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Public Life
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Sports
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Others
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-<input type="checkbox" value="_18" name="checkChild[]" class1="checkChild css-checkbox" id="cat_18">Television
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="_1stlevel">1st-Sports
        <ul>
            <li class="_2ndlevel">2nd-Badminton
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Cricket
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Soccer
                <ul>
                </ul>
            </li>
            <li class="_2ndlevel">2nd-Tennis
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="_1stlevel">1st-Music
        <ul>
        </ul>
    </li>
    <li class="_1stlevel">1st-Brands
        <ul>
        </ul>
    </li>
    <li class="_1stlevel">1st-Cartoons
        <ul>
        </ul>
    </li>
</ul>

Leading digits in IDs are fine for HTML5 (just not good for HTML 4), so good sugguestion. — iCollect.it Ltd, Sep 24 '14 at 15:41
Got some typos in there stopping you from getting to level 4. `$j('3rdlevel')` => `$j('._3rdlevel')` — iCollect.it Ltd, Sep 24 '14 at 16:05

Luigi Belli · Accepted Answer · 2014-09-25T07:29:56.860

1

By using class selectors you're matching any element of that class, not only the descendants of the element that received the click. One method to implement your needs is to use jQuery.find() to filter $(this) descendants.

JSFiddle here

edited Sep 25 '14 at 07:29

answered Sep 24 '14 at 15:42

Luigi Belli

597
6
11

You are still expanding all the lists, not just the one selected. – iCollect.it Ltd Sep 24 '14 at 15:43
@TrueBlueAussie I did it only for 3d level to 4th :) – Luigi Belli Sep 24 '14 at 15:45
This is fine but if I click 1stlevel then all child having 2ndlevel is opening. But it is not expected. exact child only will open. – Srim Sep 25 '14 at 07:31

score 0 · Answer 3 · answered Sep 24 '14 at 15:39

Below code will help you

      HTML:
      <li class="1stlevel">1st-Sports
      <ul class="ww">
        <li class="2ndlevel">2nd-Badminton
            <ul>
            </ul>
        </li>
        <li class="2ndlevel">2nd-Cricket
            <ul>
            </ul>
        </li>
        <li class="2ndlevel">2nd-Soccer
            <ul>
            </ul>
        </li>
        <li class="2ndlevel">2nd-Tennis
            <ul>
            </ul>
        </li>
    </ul> 

     CSS:

     .ww
      {
       display:none;
      }

     jquery:

      $('.1stlevel').click(function(){   
        $('.ww').css('display','block');           
      });

jQuery show() is not working properly

3 Answers3