Mam główny element div na mojej stronie z określonym identyfikatorem. Teraz niektóre elementy wejściowe tej samej klasy są obecne w tym div. więc jak mogę policzyć liczbę tych elementów tej samej klasy w tym div przy użyciu jquery?policzyć numer elementu tej samej klasy w div?
z jQuery można po prostu użyć
$('#main-div .specific-class').length
inaczej gładkie js (od IE8 zestawie) można po prostu napisać
document.querySelectorAll('#main-div .specific-class').length;
W zwykłym JS iw zgodnych/nowoczesnych przeglądarkach można użyć 'querySelectorAll()'. –
tak, wspomniałem o tym kilka sekund później :) – fcalderan
Mój punkt powstał po tym, jak o nim wspomniałeś, i naprawdę ostrzegałeś, że qSA() jest dostępna tylko w najnowszych przeglądarkach. –
$('#maindivid').find('input .inputclass').length
można dostać do węzła nadrzędnego, a następnie kwerendy wszystkie węzły z przeszukiwaną klasą. Następnie otrzymujemy wielkość
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>
Na jakiej imprezie? DOM-gotowy, po załadowaniu, po kliknięciu ..? –