Question

im new使用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>

我觉得这是正确的方法。我不能给它一个id，一个名字或一个类，因为这是由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

你想要

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

正在发生的事情是，jquery与nth-child做了一些有力的事情。它将n替换为每个可能的正整数1,2,3等。你可以做一些很酷的东西，比如使用"tr:nth-child(2n+1)"为表格的奇数行着色！

Answer 3

nth-child选择器会选择每个nth子项，而不仅仅是第一个nth子项。

您可以使用索引执行此操作：

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

使用不带名称或ID的jquery选择非唯一标记

3 个答案: