Создайте узел, если он не существует, в противном случае добавьте возвращенный HTML

Question

Я строю систему комментариев с одноуровневым вложенным ответом. Моя система комментариев основана на <ul> и <li> разметках. Ниже приведен пример дерева:

<ul class="comments">
  <li>comment text 1</li>
  <li>
    comment text 2
    <ul class="nested">
      <li>Reply 1 of comment text 2</li>
      <li>Reply 2 of comment text 2</li>
    </ul>
  </li>
</ul>

Комментарий - база Ajax (jQuery). У меня вопрос, как проверить, существует ли вложенный ответ для комментария родительского уровня? Если он существует, я смогу просто добавить новый комментарий, если нет, то я смогу создать дочерний узел <ul class="nested"> и затем вставить возвращенный HTML.

Итак, взяв приведенный выше пример: если кто-то отвечает на comment text 1, я должен иметь возможность сначала создать узел <ul>, а затем вставить возвращенный элемент <li>. Но если кто-то отвечает на comment text 2. Я должен иметь возможность добавлять возвращенные элементы <li> в существующий дочерний узел <ul>.

`

Answer 1

Мы можем проверить существование ребенка ".nested", получив его длину. Если $ (this) - ваш тег Item li (текст комментария 1) ...

<script>

    var comment = 'Reply 1 of comment text 1';
    if($(this).find('.nested').length > 0) {
        $(this).find('.nested').append('<li>'+comment+'</li>');
    } else {
        $(this).append('<ul class="nested"><li>'+comment+'</li></ul>');
    }

</script>