Nascondere il 3 ° comma di 5 punti su un clic di un pulsante, con fuori l'assegnazione di qualsiasi classe o id ai paragrafi

Question

ho cinque punti sul mio front-end, come di seguito:

<form id="form1" runat="server"> 
    <div id="div"> 
     <p>para1</p> 
     <p>para2</p> 
     <p>para3</p> 
     <p>para4</p> 
     <p>para5</p> 
     <asp:Button id="button" runat="server" Text="Click to hide para3!" />  
    </div> 
</form> 

In JS ho scritto quanto segue:

$("#button").click(function() { 
    $('#div').find('p').hide(); 
    return false; 
}); 

so quando clicco sul button nasconde tutte le p tag, quindi sarebbe bello se qualcuno mi può dire come sarei stato in grado di nascondere solo il terzo comma.

Answer 1

È possibile ottenere questo utilizzando il metodo eq() per specificare quale elemento di una abbinato set che si desidera recuperare dal suo indice. Poiché l'indice è a base zero, per ottenere il terzo elemento sarebbe eq(2).

Si noti inoltre che è necessario agganciare l'evento dell'elemento form, non l'evento click del pulsante. In primo luogo perché è molto meglio la pratica e in secondo luogo perché si sta utilizzando moduli Web ASP.NET che significa che gli attributi id saranno sovrascritte su qualsiasi runat="server" elementi quando il codice HTML è generato dal server (a meno che non si specifica un'impostazione ma non è specificamente rilevante qui).

Prova questa:

<form id="form1" runat="server"> 
    <div id="div"> 
     <p>para1</p> 
     <p>para2</p> 
     <p>para3</p> 
     <p>para4</p> 
     <p>para5</p> 
     <asp:Button id="button" runat="server" Text="Click to hide para3!" />  
    </div> 
</form> 

$("form").submit(function(e) { 
    e.preventDefault(); 
    $('#div').find('p:eq(2)').hide(); 
}); 

Working example

Answer 2

Il selettore di jQuery nth-child(n) seleziona tutti gli elementi che sono nth child, indipendentemente dal tipo, del genitore. Così lo si può fare con questo modo:

$("#button").click(function() { 
    $('#div p:nth-child(3)').hide(); 
    return false; 
}); 

Answer 3

Prova questa:

$("#button").click(function() { 
    $('#div').find('p:nth-child(3)').hide() 
    return false; 
}); 

:nth-child(' + number + ') darà il bambino in posizione 'Numero'.

Answer 4

Si può semplicemente utilizzare jQuery di .eq(). questo metodo riduce il set di elementi corrispondenti a quello dell'indice specificato.

Per ulteriori Jquery's.eq()

$("form").submit(function(e) { 
 
    e.preventDefault(); 
 
    $('#div p').eq(2).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form id="form1"> 
 
    <div id="div"> 
 
     <p>para1</p> 
 
     <p>para2</p> 
 
     <p>para3</p> 
 
     <p>para4</p> 
 
     <p>para5</p> 
 
     <button id="button">Click to hide para3</button> 
 
    </div> 
 
</form>

Answer 5

Giochiamo. (Solito non funziona su Safari o IE a causa di frecce però)

button.onclick = e => div.children[2].hidden = !div.children[2].hidden;

<form id="form1"> 
 
    <div id="div"> 
 
     <p>para1</p> 
 
     <p>para2</p> 
 
     <p>para3</p> 
 
     <p>para4</p> 
 
     <p>para5</p> 
 
     <button id="button">Click to hide para3</button> 
 
    </div> 
 
</form>