No funciona correctamente el next()

Ciel · #1 (**permalink**) 09/02/2013, 13:53

Esto resulta sumamente raro, la otra vez le hice un cambio al codigo implementando algo y se me borro, hoy lo quise replicar y hay algo que no esta funcionando bien y no entiendo porque.

Les muestro el html importante con respecto al problema:

Código HTML:

Ver original<div class="pros">
    <header><h1>PROS</h1></header>
    <textarea id="pro" class="animated" placeholder="Add PROS items to this list"></textarea>
    <div class="enter">Press enter to add</div>
    <ul id="listpro" class="listitems"></ul>
</div>

Lo que quiero hacer aca es.... desde el <textarea> pasar al <ul> por medio de next haciendo lo siguiente:

Código Javascript:

Ver original$(this).next('ul').append($(item).delay(1).animate({left: 0, opacity: 1}, 400));

Pero con el next('ul') no se a donde se esta yendo, puesto que si hago un alert me tira "undefined".

De la unica forma que funciona el codigo es comentando o sacando el div del medio, es decir este:

Código HTML:

Ver original<!-- <div class="enter">Press enter to add</div> -->

Pero no entiendo porque, si se supone que el next() puede saltearse algo justamente declarando al elemento al que quiero ir, en este caso al 'ul'

Alguna idea?

ipraetoriux · #2 (**permalink**) 10/02/2013, 00:51

...pues mirando un poquito te consulto...

1ero. porque usas un textarea para agregar items?...lo mejor seria usar un input text...
2do. porque te complicas con el next(), podes directamente usar append
3ero. como caputaras el evento de la tecla enter?..

mira acá te lo modifique fácil...luego tu lo ajustas con la animacion, esto funciona en IE, Chrome, FF...lo que hacemos primero es detectar si se ha presionado una tecla y luego ver su valor, si es un enter, usando append anañes como lista el valor del input, y luego lo limpias para que siga funcionando...

aca te dejo el codigo, y aca te lo puse online para que veas...http://jsbin.com/oxibas/22/edit

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="pros">
    <header><h1>PROS</h1></header>
  <input type="text" id="pro" class="animated" placeholder="Add PROS items to this list"/>
 
    <ul id="listpro" class="listitems"></ul>
</div>
</body>
</html>

Código Javascript:

Ver originaldocument.onkeypress=function(e){
var esIE=(document.all);
var esNS=(document.layers);
var tecla=(esIE) ? event.keyCode : e.which;
if(tecla==13){
  $('#listpro').append('<li>' + $('#pro').val() + '</li>');
  $('#pro').val('');
  return false;
  }
};

Ciel · #3 (**permalink**) 10/02/2013, 15:54

1ero. Ahora que lo preguntas no estoy seguro, supongo que el textarea se usa mas para cuando se le puede ingresar contenido mas grande? O me equivoco? Aun asi uso un plugin para que se expanda el textarea para abajo al ir rellenando con texto el mismo, pero en fin...

2do. No uso directamente append() porque yo solamente te mostre el div "pro", pero tengo otro div con los mismos elementos dentro... entonces mi idea es hacerlo dinamicamente que al mandarle enter se cree un item <li> dentro del <ul> siguiente, se entiende?

3ro. Te paso el codigo:

Código Javascript:

Ver original$('textarea').keydown(function(event) {
        if(event.keyCode == 9) {
            if($(this).attr('id') == 'con') {
                $('#pro').focus();
                event.preventDefault();
            }
        }
        if(event.keyCode == 13) {
            if (!$.trim($(this).val())) {
                $(this).val("");
                return false;
            }
            var value = $(this).val();
            var item = "<li class='item'>" + value + "</li>";
            $(this).next('ul').append($(item).delay(1).animate({left: 0, opacity: 1}, 400));
            $(this).val("");
            
            var type = $(this).attr('id');
            listitems[type].push(value);
            
            if(created == 0) {
                $('#create-list').slideDown(300);
            }
            
            created++;
            event.preventDefault();
            return false;
        }
    });

Pero en fin, eso anda perfectamente.... el unico problema es el next() que no me saltea los elementos, por mas que le asigne un elemento como "ul". Es mas, antes me andaba... debe ser alguna boludez que cambie y esta afectando de alguna forma, pero no puedo entender que es.

EDIT: Si hago esto si funciona:

Código Javascript:

Ver original$(this).next().next('ul').append($(item).delay(1).animate({left: 0, opacity: 1}, 400));

Pero realmente no tiene sentido... como puede ser que no me saltee un div?