Как подсчитать колл. всех 0 и всех 1 в классе tr
Непростая задачка. Нужна ваша помочь!
Есть блок случайных счетчиков. Каждый из них вводит в случайном порядке 0 или 1.
Но нужно после этого с помощью jquery подсчитать количество 0 и 1 и записать в DIV
<div class="vsego-0"></div>
<div class="vsego-1"></div>
Есть блок случайных счетчиков. Каждый из них вводит в случайном порядке 0 или 1.
Но нужно после этого с помощью jquery подсчитать количество 0 и 1 и записать в DIV
<div class="vsego-0"></div>
<div class="vsego-1"></div>
Код:
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
Что может быть проще?
Код:
var c0=0,c1=0;
$('.tr>.td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
});
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
$('.tr>.td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
});
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
Переменные c0 и с1 пустые...
Код:
<style>
.td {
width: 32px;
height: 32px;
line-height: 32px;
margin: 5px;
background-color: #f4f4f4;
float: left;
font-family: arial;
font-size: 16px;
text-align: center;
}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
var c0=0,c1=0;
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
});
</script>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
.td {
width: 32px;
height: 32px;
line-height: 32px;
margin: 5px;
background-color: #f4f4f4;
float: left;
font-family: arial;
font-size: 16px;
text-align: center;
}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
var c0=0,c1=0;
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
});
</script>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
Играюсь со скобками. Для проверки добавил еще $('.vsego-0').addClass("true");
но тоже не работает...
но тоже не работает...
При таком раскладе, добавление класса не работает.
Код:
<style>
.td {
width: 32px;
height: 32px;
line-height: 32px;
margin: 5px;
background-color: #f4f4f4;
float: left;
font-family: arial;
font-size: 16px;
text-align: center;
}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
var c0="0", c1="0";
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
}
$('.vsego-0').addClass("true");
});
</script>
.td {
width: 32px;
height: 32px;
line-height: 32px;
margin: 5px;
background-color: #f4f4f4;
float: left;
font-family: arial;
font-size: 16px;
text-align: center;
}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
var c0="0", c1="0";
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
}
$('.vsego-0').addClass("true");
});
</script>
Набирал прямо здесь, забыл скобку. Вот проверенный вариант:
Код:
<style type="text/css">
.vsego-0,.vsego-1 {width: 32px;height: 32px;background-color: #f4f4e4;float: left;font-family: arial;font-size: 16px;text-align: center;margin: 5px;line-height: 32px;font-weight:bold;}
.td {width: 32px;height: 32px;line-height: 32px;margin: 5px;background-color: #f4f4f4;float: left;font-family: arial;font-size: 16px;text-align: center;}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div style="clear:both;"></div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
var c0=0, c1=0;
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
});
});
</script>
.vsego-0,.vsego-1 {width: 32px;height: 32px;background-color: #f4f4e4;float: left;font-family: arial;font-size: 16px;text-align: center;margin: 5px;line-height: 32px;font-weight:bold;}
.td {width: 32px;height: 32px;line-height: 32px;margin: 5px;background-color: #f4f4f4;float: left;font-family: arial;font-size: 16px;text-align: center;}
</style>
<div class="tr">
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
<div class="td"><? echo rand(0, 1); ?></div>
</div>
<div style="clear:both;"></div>
<div class="vsego-0"></div>
<div class="vsego-1"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
var c0=0, c1=0;
$('.tr > .td').each(function() {
if (parseInt($(this).html())==0) c0++; else c1++;
$('.vsego-0').html(c0);
$('.vsego-1').html(c1);
});
});
</script>