Ho un div principale nella mia pagina con un ID specifico. Ora alcuni elementi di input della stessa classe sono presenti in questo div. quindi come posso contare il numero di questi elementi della stessa classe in questo div usando jquery?conta il numero di elementi della stessa classe in un div?
Con jQuery si può semplicemente utilizzare
$('#main-div .specific-class').length
altrimenti con js semplici (da IE8 incluso) si può semplicemente scrivere
document.querySelectorAll('#main-div .specific-class').length;
Con JS semplice e nei browser conformi/moderni è possibile utilizzare 'querySelectorAll()'. –
sì, ne ho parlato solo alcuni secondi dopo :) – fcalderan
Il mio punto è stato fatto dopo averlo menzionato, ed è stato davvero un avvertimento che qSA() è disponibile solo nei browser recenti. –
$('#maindivid').find('input .inputclass').length
Si può raggiungere il nodo padre e poi di query tutti i nodi con la classe che viene ricercata. allora otteniamo la dimensione
var parent = document.getElementById("parentId");
var nodesSameClass = parent.getElementsByClassName("test");
console.log(nodesSameClass.length);<div id="parentId">
<p class="prueba">hello word1</p>
<p class="test">hello word2</p>
<p class="test">hello word3</p>
<p class="test">hello word4</p>
</div><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#adding_employment').click (function(){
if(count < 7){
$($('.input-append').first().clone()).appendTo("#ss");
$($('.input-append1').first().clone()).appendTo("#ss1");
count++;
}
});
});
</script>
</head>
<body>
<form method="post" id="form_property" enctype="multipart/form-data">
<a id="adding_employment" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a><br/><br/>
<div class="row">
<div class="span4" id="ss" >
<div class="input-append">
place the code here
</div>
</div><!-- /.span4 -->
<div class="span4" id="ss1" >
<div class="input-append1">
second
</div>
</div>
</div><!-- /.row -->
<br/>
</form>
</body>
</html>
Su quale evento? DOM-ready, on load, on click ..? –