Как отобразить количество дочерних записей в родительском, используя Javascript или JQuery - PullRequest
Новая
       4

Как отобразить количество дочерних записей в родительском, используя Javascript или JQuery

1 голос
/ 17 апреля 2009

В приведенном ниже примере: 

<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 или Jquery. Как это возможно?

Я новичок в JQuery и Java-скриптах.

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

Ответы [ 4 ]

7 голосов
/ 17 апреля 2009

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

$(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 + ')');
});
1 голос
/ 17 апреля 2009

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

$('tr.parent').each(function() {
  var next = $(this).next();
  var count = 1;
  while (next = $(next).next() && $(next).hasClass('child')) {
    count++;
  }
  $(this).find('td').append(' (' + count + ')');
});
0 голосов
/ 18 апреля 2009

Я нахожу сложные селекторы и циклы 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+')';
0 голосов
/ 17 апреля 2009

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

Лучше было бы определить дочерние узлы как фактически дочерние элементы родительского 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 + ")"); });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...