Как отобразить счетчик дочерней записи в ролике с помощью Javascript или JQuery

63
9

В следующем примере:


<html>
<head>
<script src="some.js" type="text/javascript"></script>
<script type="text/javascript">

//???
//???

);

</script>
</head>
<body>
<table>
<tr id="parent_1">
<td>Parent 1</td>
</tr>
<tr class="child">
<td>Child 1</td>
</tr>
<tr class="child">
<td>Child 2</td>
</tr>
<tr id="parent_2">
<td>Parent2</td>
</tr>
</table>
</body>
</html>


Я хотел, чтобы текст "Родительский 1" изменился на "Родитель 1 (2)", где "2" - число дочерних элементов для данного родителя с использованием Java script или JQuery. Как это возможно?


Я новичок в JQuery и Java script.


Пожалуйста, дайте мне знать.

спросил(а) 2021-01-28T01:01:48+03:00 3 месяца, 1 неделя назад
1
Решение
121

Ммм. Крепкий орешек.:) Это должно сделать это, хотя:


$(function() {
$("tr[id^='parent_']").each(function() {
var count = 0;
$(this).nextAll('tr').each(function() {
if($(this).hasClass('child')) {
count++;
} else {
return false;
}
});
$(this).find('td').append(' (' + count + ')');
});
});

Протестировано и работает.


Хотя вышеизложенное работает, оно не очень эффективно. Я также хочу сделать второй, чтобы предложить немного изменить формат вашего HTML. Вы хотите, чтобы ваш код был семантически релевантным для содержания, которое он держит, насколько это возможно. Наличие одного огромного стола, смешивающего родителей и детей, не является оптимальным способом достижения этого. Я не уверен, что ваш пример использования здесь, но подумайте о том, чтобы сделать что-то вроде этого:


<ul>
<li id="parent_1">
<span>Parent 1</span>
<ul>
<li>Children 1</li>
<li>Children 2</li>
<li>Children 3</li>
</ul>
</li>
<li id="parent_2">
<span>Parent 2</span>
<ul>
<li>Children 1</li>
</ul>
</li>
<li id="parent_3">
<span>Parent 3</span>
<ul>
<li>Children 1</li>
<li>Children 2</li>
</ul>
</li>
</ul>

Вы все равно можете использовать этот стиль, но хотите, чтобы он выглядел так, как вам хочется, хотя это может быть не так просто, если вы действительно показываете табличные данные о родителях и детях.

С этим кодом, однако, вы могли бы упростить приведенное выше с гораздо более эффективным:


$('ul > li').each(function() {
var count = $(this).find('li').length;
$('span', this).append(' (' + count + ')');
});

Если изменение кода из таблицы в список невозможно/желательно, но у вас есть доступ к серверному коду, который предположительно генерирует эту таблицу, вы могли бы, по крайней мере, сделать что-то проще, предоставив всем детям класс с идентификатором родителя и предоставлением всем родителям общего класса:


<table>
<tr id="parent_1" class="parent">
<td>Parent 1</td>
</tr>
<tr class="child parent-1">
<td>Child 1</td>
</tr>
<tr class="child parent-1">
<td>Child 2</td>
</tr>
<tr id="parent_2" class="parent">
<td>Parent2</td>
</tr>
<tr class="child parent-2">
<td>Child 1</td>
</tr>
<tr id="parent_3" class="parent">
<td>Parent3</td>
</tr>
<tr class="child parent-3">
<td>Child 1</td>
</tr>
<tr class="child parent-3">
<td>Child 2</td>
</tr>
<tr class="child parent-3">
<td>Child 3</td>
</tr>
</table>

Что позволит вам сделать это намного быстрее, чем исходное решение:


$('tr.parent').each(function() {
var id = $(this).attr('id').split('_').pop();
var count = $('tr.parent-' + id).length;
$(this).find('td').append(' (' + count + ')');
});

ответил(а) 2021-01-28T01:01:48+03:00 3 месяца, 1 неделя назад
62

Дайте родителям класс "родителя", чтобы сделать его немного легче.

$('tr.parent').each(function() {
var next = $(this).next();
var count = 1;
while (next = $(next).next() && $(next).hasClass('child')) {
count++;
}
$(this).find('td').append(' (' + count + ')');
});

ответил(а) 2021-01-28T01:01:48+03:00 3 месяца, 1 неделя назад
44

Поскольку ваш html фактически не размещает дочерние узлы ниже родительских узлов в разметке, самым простым способом сделать это будет цикл по всем TR и подсчет class= "child" для каждого родителя. Код Paolo должен сделать это для вас.


Лучше было бы иметь дочерние узлы, определенные как фактически дочерние элементы родительского td, тогда jquery может упростить вам вещи. Если вы можете позволить себе реорганизовать таблицу следующим образом:


<table>
<tr id="parent_1">
<td>Parent 1
<table>
<tr class="child">
<td>Child 1</td>
</tr>
<tr class="child">
<td>Child 2</td>
</tr>
</table>
</td>
</tr>
<tr id="parent_2">
<td>Parent2</td>
</tr>
</table>

тогда вы можете написать более простой jquery, например:


$("td").each(function(){$(this).val($(this).val() + "(" + $(this).find("td").length + ")"); });

ответил(а) 2021-01-28T01:01:48+03:00 3 месяца, 1 неделя назад
44

Я нахожу сложные селектора jQuery и циклы довольно забавными, учитывая, что у DOM уже есть отличное свойство rowIndex, которое вы можете использовать, чтобы просто и значительно повысить количество детей:


var p1= document.getElementById('parent_1');
var p2= document.getElementById('parent_2');

var childn= p2.rowIndex-p1.rowIndex-1;
p1.cells[0].firstChild.data+= ' ('+childn+')';

ответил(а) 2021-01-28T01:01:48+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема