Estilos al crear LI con JQUERY

Pancho_Khan · #1 (**permalink**) 05/10/2016, 11:00

Hola gente, necesito crear una lista dinámicamente a través de jquery pero al momento de agregar un LI nuevo necesito también asignarle una clase diferente a los elementos pares contra los impares....
Como se puede agregar clases diferentes en el mismo momento de crear los LI?
En el código de más abajo puedo asignar estilos pero uno sobreescribe al otro...

Les dejo mi código para que lo vean:

Código HTML:

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
	<script type="text/javascript">		
		$(document).ready(function(){		 
		 	var elementoLi = document.getElementsByTagName("li");		
			$('#agregaLi').click(function () {
				if(elementoLi.length % 2 == 0 || elementoLi.length == 0){			 
					$("#lista").append( '<li>' +'Nuevo elemento impar');
					$("li").addClass("impar")					
				}	
			 	else{
			 		$("#lista").append( '<li>' +'Nuevo elemento par');
			 		$("li").addClass("par")			 		
			 	}

			});	
	</script>
	 
	<STYLE type="text/css">			
		.par{color: red}
		.impar{color: blue}
	</STYLE>
 
</head>
<body>	
	<!-- crea un nuevo elemento en la lista -->
	<button id="agregaLi">Nuevo li</button>
	 
	<ol id="lista"> </ol>
	
	
</body>[HTML]

[/HTML]

dardosmania · #2 (**permalink**) 05/10/2016, 11:59

Porque no lo haces solo con css?

ul li:nth-child(even){color: red;}

ul li:nth-child(odd){color: blue;}

Pancho_Khan · #3 (**permalink**) 05/10/2016, 13:38

Muchas gracias por tu respuesta, eso lo probé y me funcionó, pero la idea mía es ver como puedo crear un elemento de lista mediante jQuery (eso me funciona) y en ese instante ponerle la clase o eventualmente una identidad para poder luego aplicar css.
POr casualidad sabes como hacerlo?

dardosmania · #4 (**permalink**) 08/10/2016, 13:33

Si quieres poner otro tipo de atributo html lo puedes hacer con el metodo .prop("NOMBRE_ATRIBUTO", "VALOR") de esta maners le puedes poner tu el atributo que quieras ya sea, id, class, data-..., etc