nextSibling ul li ul

Question

i'm not sure but if i understood right js nextSibling focus next node ? So why i get trouble, when i want to select ul in a li ?

    <ul>
<li><input id="btn-page" type=button onclick="displayMenu();" /></li>
    <ul class="hide">
        <li>Some text</li>
    </ul>
    <li>...</li>
   </ul>

And my js function :

    function displayMenu() {
   var idMenu = event.target.id;
   var ulDisplay = document.getElementById(idMenu).nextSibling;
   ulDisplay.style.display = 'block';
}

I think i forgot something but i don't know why. Thanks for help :)

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

2

As @andreas pointed out the structure of your HTML is not valid because you can't have a UL as child of a UL. But you can have a UL as a child of LI. So consider updating your HTML in this way. Helper function "Next()" from previous similar answer Hide an element's next sibling with Javascript used to find the UL

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .hide { display: none; }
        </style>
        <title>Title</title>
        <script type="text/javascript">
            function next(elem) {
                do {
                    elem = elem.nextSibling;
                } while (elem && elem.nodeType != 1);
                return elem;                
            }

            function displayMenu(id) {
                var ulDisplay = next(document.getElementById(id));
                ulDisplay.style.display = 'block';
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <input id="btn-page" value="show" type=button onclick="displayMenu(this.id);" />
                <ul class="hide"><li>Some text</li></ul>
            </li>
            <li>...</li>
        </ul>
    </body>
</html>

edited May 23 '17 at 12:21

Community

1
1

answered Aug 30 '12 at 12:53

Scott

21,211
8
65
72

hi, thanks for answering but it didn't work. And i don't understand why using parentNode.nextSibling. When doing it, id focus himself (parentNode go back in node, nextSibling focus next node so its cancelled each, no ?) – TikTaZ Aug 30 '12 at 13:08
1
Your comment relates before my latest edit, try it instead. No parentNode from the INPUT takes you to the LI that is wrapping it. Then the nextSibling is the UL assuming there is no whitespace between and the
– Scott Aug 30 '12 at 13:11
Okay don't see about whitespace, sorry. I had 4 tabulations so it's why it didn't work. I forgot indentation and it's good. Thanks for helping :) – TikTaZ Aug 30 '12 at 13:16
No problem. The whitespace caught me out too when I was testing. Good luck with your project. – Scott Aug 30 '12 at 13:17

manish · Answer 2 · 2012-08-30T13:17:57.200

0

This way seems better.

HTML

<ul>
 <li>
  <input id="btn1" type='button' onclick="displayMenu(event);" />
 </li>
 <li><ul id="page1" style="display: none" class="hide">
  <li>Some text</li>
 </ul></li>
 <li>...</li>
</ul> <

JS

function displayMenu(event) {
    var id = event.target.id.substring(3);
    var ulDisplay = document.getElementById("page" + id);
    ulDisplay.style.display = "block";
}

edited Aug 30 '12 at 13:17

answered Aug 30 '12 at 12:32

manish

497
9
17

I am quite sure the OP is trying to perform the toggle action and it's not working. I can't see how your answer solves this. – Scott Aug 30 '12 at 12:41
I was showing another way to get the siblings. Where I think the OP problem was. – manish Aug 30 '12 at 12:43
No sorry, i success to focus input's id, then i want to get a way to focus following ul (which is next node after my input, isn't it ?) – TikTaZ Aug 30 '12 at 12:45
@TikTaZ by sending the page you want to show in the function might simplify it a bit. – manish Aug 30 '12 at 13:07
yeah but i have 4 input button with a following ul list, so i want to keep my way and make one generic function for all 4 button. – TikTaZ Aug 30 '12 at 13:12
Problem resolved, shit was about whitespace. Thanks to your time wasted to helping me :) – TikTaZ Aug 30 '12 at 13:17

nextSibling ul li ul

2 Answers2