用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>');