Подсчет количества элементов в блоке
Добрый день. Имеется следующий код:
<div class="single-room"> <img src=""> <img src=""> <span class="count"></span> </div> <div class="single-room"> <img src=""> <img src=""> <img src=""> <span class="count"></span> </div> и скрипт, который считает количество картинок и выводит их в count:
$(document).ready(function(){
$(".count").html($(".gallery img").length);
});
Проблема в том, что скрипт выводит общее количество картинок в документе. Подскажите, что нужно добавить, чтобы он для каждого блока single-room выводил количество картинок внутри него? С уважением, Вячеслав |
SuperTester,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(".single-room").each(function(indx, el){
$(".count",el).text($('img',el).length)
});
});
</script>
</head>
<body>
<div class="single-room">
<img src="">
<img src="">
<span class="count"></span>
</div>
<div class="single-room">
<img src="">
<img src="">
<img src="">
<span class="count"></span>
</div>
</body>
</html>
|
Премного вам благодарен, выручили в который раз уже.
|
Приветствую всех!
Попробовал такой же скрипт. Почему то не работает... У меня такой вот код, там выводится input, кнопка добавить поле, кнопка удалить поле.
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<?php
$array = '';
$values = explode("|",$array);
$n = 0;
foreach ($values as $value) {
$n++;
if ($n == 1) {
?>
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<?php
} else {
?>
<div id="add<?=$n?>" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs<?=$n?>" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<?php
}
}
?>
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
и скрипт
<script>
$(function(){
$("#add_field_area").each(function(indx, el){
$(".count",el).text($('.add',el).length)
});
});
</script>
в .count - пусто. Собственно делаю это для чего. Сейчас у меня кнопка "Удалить поле" видна постоянно. А я хочу, чтобы она появлялась только когда есть 2 инпута и более. Вот и думал подсчитать количество инпутов. Вывести в переменную. и потом присвоить display:none; этой кнопке. Возможно есть и другой способ, придумал только это) |
the_little,
можно без php, только готовый html |
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<div id="add2" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs2" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<!-- пробовал сюда вставить <span class="count"></span>, посчитал, вывел 1, но если нажать на кнопку добавить поле, то значение не меняется. Так и остается 1-->
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
|
И таких блоков на странице несколько.
|
the_little,
а зачем их вообще считать? |
the_little,
id лучше убрать, достаточно классов
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".step2-blocks").each(function(indx, el) {
var add = $(".add", el),
num = add.length,
item = add.eq(0).clone(),
del = $(".delbutton", el),
n = 1;
function show() {
del.toggle(num > n)
}
show();
$(".addbutton", el).on("click", function() {
var block = item.clone().insertAfter($(".add:last", el));
$(".inputfile", block).attr({
"name": "ustav-docs" + ++num
});
show()
});
del.on("click", function() {
$(".add:last", el).remove();
num--;
show()
})
})
});
</script>
</head>
<body>
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<div id="add2" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs2" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<!-- пробовал сюда вставить <span class="count"></span>, посчитал, вывел 1, но если нажать на кнопку добавить поле, то значение не меняется. Так и остается 1-->
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:55. |