How i access to the second ul tag on css to change style with javascript-CodePudding

i have this html code:

        <div >
            <ul  > 
                <div>
                    <li>
                        <input type="text"  id="name" placeholder="Usuario.."></li>  
                </div>
                <div>
                    <li>
                        <input type="password"  id="pass" placeholder="Contraseña.."></li>
                    </div>
                <div  id="BotonLogin"><p>Entrar</p></div>
            </ul>
            <ul >
                <div>
                    <img src="./img/admin.png" alt="adminIcon"  id="adminIcon">
                    <p >¡Hola administrador!</p>
                </div>
            </ul>
        </div>

this is the CSS

.preLogin{
  display: none;
}



.postLogin{
  display: none;

this is the file .js

jQuery('document').ready(function ($) {   
    var btnLogin = $('.botonLogin'),
    menu = $('.login ul');
    btnLogin.click(function(){
        
        var name=document.getElementById("name").value;
        var pass=document.getElementById("pass").value;
        if (name == "admin" && pass=="admin"){
            window.alert("Bienvenido a nuestro sitio web");
            menu.addClass('preLogin');
            menu.removeClass('postLogin');
        }
    });
});

what i want is do the same what the before js does but this time with the second ul: enter image description here i dont know how to access to that ul to put the css style postlogin to hidde o show the second ul.

thank you!!

i want to know how to acces the second UL to change the css style

CodePudding user response：

You can use CSS nth-child.

Like this

var secondUl = $('.login ul:nth-child(2)');

// add and remove class
secondUl.addClass('postLogin');
secondUl.removeClass('preLogin');

Demo

const $ = document.querySelector.bind (document)

var secondUl = $('.login ul:nth-child(2)');
console.log (secondUl)

// add you logic here

<body>
  <div >
            <ul  > 
                <div>
                    <li>
                        <input type="text"  id="name" placeholder="Usuario.."></li>  
                </div>
                <div>
                    <li>
                        <input type="password"  id="pass" placeholder="Contraseña.."></li>
                    </div>
                <div  id="BotonLogin"><p>Entrar</p></div>
            </ul>
            <ul >
                <div>
                    <img src="./img/admin.png" alt="adminIcon"  id="adminIcon">
                    <p >¡Hola administrador!</p>
                </div>
            </ul>
        </div>
</body>

CodePudding user response：

You can use this in javascript

var ul2 = document.querySelectorAll("ul")[1];
ul2.style.background = "#000";

and in jquery you can use eq:

$("ul").eq(1).css("background","#000");