用jquery选择没有名称或ID的非唯一标签

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> 

我认为这将是正确的方法。我不能给它一个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的做一些强大的东西与第n个孩子。它用每个可能的正整数1，2，3等来代替n。你可以做一些很酷的东西，比如颜色与"tr:nth-child(2n+1)"表的奇数行！

Answer 3

的nth-child选择器选择每nth孩子，而不只是第nth孩子。

您使用索引做你想做的是这样的：

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