Выбор неуникальных тегов с помощью jquery без имени или идентификатора

Question

я новенький, используя jquery с django.Я пытаюсь сообщить пользователю, доступно ли введенное письмо, используя ajax и jquery.

Этот раздел представляет интерес из исходного шаблона перед любым javascript:

<form action="/registro/usr/solicitud/" method="post" name="solicitud"> 
    <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='08f46536def8682c7fef57e3e86dfd38' /></div> 
    <table id="tabla_solUsr"> 
        <tr><th><label for="id_username">Nombre de usuario:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /><br /><span class="helptext">Requerido. 30 caracteres o menos. Letras, dígitos y @/./+/-/_ solamente.</span></td></tr> 
        <tr><th><label for="id_password1">Contraseña:</label></th><td><input type="password" name="password1" id="id_password1" /></td></tr> 
        <tr><th><label for="id_password2">Contraseña (confirmación):</label></th><td><input type="password" name="password2" id="id_password2" /><br /><span class="helptext">Introduzca la misma contraseña que arriba, para verificación.</span></td></tr> 
        <tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr> 
        <tr><th><label for="id_nombre">Nombre:</label></th><td><input id="id_nombre" type="text" name="nombre" maxlength="50" /></td></tr> 
        <tr><th><label for="id_apellido">Apellido:</label></th><td><input id="id_apellido" type="text" name="apellido" maxlength="50" /></td></tr> 
        <tr><th><label for="id_ci">Cédula de identidad:</label></th><td><input id="id_ci" type="text" name="ci" maxlength="8" /></td></tr> 
        <tr><th><label for="id_carnet">Carnet:</label></th><td><input id="id_carnet" type="text" name="carnet" maxlength="7" /></td></tr> 
        <tr><th><label for="id_oficina">Oficina:</label></th><td><input id="id_oficina" type="text" name="oficina" maxlength="8" /></td></tr> 
        <tr><th><label for="id_telefono">Telefono:</label></th><td><input id="id_telefono" type="text" name="telefono" maxlength="12" /></td></tr> 
        <tr><th><label for="id_dpto">Departamento:</label></th><td>
            <select name="dpto" id="id_dpto"> 
                <option value="" selected="selected">---------</option> 
                <option value="2">(CO) Cómputo Científico</option> 
                <option value="3">(CI) Computación y Tecnología de la Información</option> 
                <option value="4">(MA) Matemáticas</option> 
                <option value="6">(MC) Mecánica</option> 
                <option value="7">(FS) Física</option> 
            </select>
        </td></tr> 
    </table> 
    <button type="button" style="margin-left:190;margin-right:auto;width:137px;height:21px" id="newDtpo" class="flip">Nuevo Departamento</button> 
    <input type="submit" value="Registrase" /> 
</form>

Этомоя попытка сделать то, что я упомянул:

$(document).ready(function(){
    $("#tabla_solUsr tr:first").append('<span id="usrSt" class="usrSt"></span>');
    $("tr:nth-child(4n)").append('<span id="emailSt" class="emailSt"></span>');

    $("#id_username").keyup(function(){
       // Grab what has been introduced and ask the server through ajax; then, show the result 
    });

    $("#id_email").keyup(function(){
       // Grab what has been introduced and ask the server through ajax; then, show the result
    });
});

Фактическая проблемная строка:

$("tr:nth-child(4n)").append('<span id="emailSt" class="emailSt"></span>');

Я пытаюсь получить четвертый тег 'tr' в моем документе,

<tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr>

и я подумал, что это будет правильный путь.Я не могу дать ему идентификатор, имя или класс, потому что он динамически генерируется django.

вместо того, чтобы захватить то, что я ожидал, я получаю четвертый тег 'tr' и четвертый 'tr'тег после этого:

<tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr>

и

<tr><th><label for="id_carnet">Carnet:</label></th><td><input id="id_carnet" type="text" name="carnet" maxlength="7" /></td></tr>

Есть ли способ получить только нужный мне тег?почему это происходит?Я хотел бы знать, что происходит, чтобы я мог понять, как работают селекторы ...

Я прошу прощения за мой английский и надеюсь, что вы поможете мне!заранее спасибо!

Answer 1

Вы можете поочередно сделать что-то вроде

$("label[for='id_email']").parent().parent().append(...

Я думаю, что это будет более читабельным и более надежным, когда кто-то изменит вашу страницу позже.

Answer 2

Селектор nth-child выбирает каждого nth дочернего элемента, а не только первого nth дочернего.

Вы используете индекс, чтобы делать то, что вы хотите, как это:

$("tr")[3].append('<span id="emailSt" class="emailSt"></span>');

Answer 3

Вы хотите

$("tr:nth-child(4)") // not 4n

То, что происходит, - то, что jquery делает некоторые мощные вещи с nth-child.Он заменяет n каждым возможным положительным целым числом 1, 2, 3 и т. Д. Вы можете делать классные вещи, такие как раскраска нечетных строк таблицы с помощью "tr:nth-child(2n+1)"!