JQuery граф LI и если странно сделать что-то

Question

Если UL имеет нечетное количество записей LI, я хочу добавить тег BREAK (<br />) после первого LI.

Это результат, если количество LI равно EVEN:

  <ul id="cat">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>

Это результат, если число LI равно ODD:

  <ul id="cat">
    <li><a href=""></a></li><br />
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>

Мой фрагмент кода jQuery:

$("#cat").each(function() {
    var elem = $(this);
    if (elem.children("li").length % 2 != 0) {
        elem.prepend("<br />");
    }
});

Это просто приводит к

      <ul id="cat">
<br />
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>

Answer 1

То, что вы делаете неправильно, вы готовитесь к UL. Который добавит
перед всеми LI. Если вы получаете первый LI и делаете after(), то BR добавляется после LI. Также это не допустимый HTML. Поэтому, пожалуйста, используйте CSS для этого.

Если вы все еще хотите использовать Javascript следующим образом:

$("#cat").each(function() {
    var elem = $(this);
    if (elem.children("li").length % 2 != 0) {
        elem.children("li").first().after("<br />");
    }
});

Но почему БР после ЛИ? Разве вы не можете просто решить это с помощью CSS?

li {
    display: block;
}

Answer 2

используйте css, чтобы получить вывод вместо

, если вы установите его на первое значение il, вы получите тот же эффект

clear:both;
display:block;

Answer 3

Вы не должны вставлять в свой список ничего, кроме тегов <li> - это недопустимый HTML.

Я бы пошел на:

elem.children().first().css('display', 'block');

Однако точный CSS зависит от того, чего именно вы пытаетесь достичь визуально.

Answer 4

Используйте дочерние элементы ("li: first") и .after (), чтобы вставить
после первого LI.

$("#cat").each(function() {
    var elem = $(this);
    if (elem.children("li").length % 2 != 0) {
        elem.children("li:first").after("<br />");
    }
});

Answer 5

Вы можете сделать:

$("#cat").each(function() {
    var elem = $(this);
    if (elem.children("li").length % 2 != 0) {
        elem.find("li:first").append("<br />");
    }
});

Answer 6

$("#cat").each(function() {
    var elem = $(this);
    if (elem.children("li").length % 2 != 0) {
        elem.find(">:first-child").prepend("<br />");
    }
});