Итерация каждой таблицы в аккордеоне только один раз с использованием jQuery

Question

Итерация каждой таблицы в аккордеоне только один раз с использованием jQuery

0

У меня есть аккордеон с 5 разделами. Внутри каждой секции находится таблица. Если эта таблица содержит более 10 строк, добавляется ссылка View More. Моя проблема в том, что ссылка "Подробнее" добавляется 5 раз в первую таблицу. 4 раза во второй таблице. 3 раза в третьей таблице. И так далее...

Как добавить ссылку View More только один раз на каждую таблицу, где есть более 10 (или 2) строк.

$(".accordion-group table tbody").each(function() {

    var row = $(this).find("tr");
    var colunm = $(this).find("tr:first td");

    row.last().addClass("last");

    var rowCount = row.length;
    var columnCount = colunm.length;

    if (rowCount > 10) {
        $("<tr><td colspan=" + columnCount + " class=\"view_more_accordian\" style=\"text-align:center;\">View more</td></tr>").insertAfter(".last");
    }
}); });

Заранее спасибо за вашу помощь.

MWA 05 дек. 2013, в 23:42

Источник

0

Можете ли вы показать свой HTML, а также.
PSL 05 дек. 2013, в 22:13

Теги:

jquery

each

append

insertafter

1 ответ

Ещё вопросы

Можете ли вы показать свой HTML, а также.

PSL · Accepted Answer · 2013-12-05T20-43-00.000Z

Причина в том, что в вашем insertAfter selctor вы предоставляете tbody и который вернет их все и вставьте после всего доступного tbody, вместо этого просто добавьте его к текущему телу, то есть к this.

+ Изменить

$("<tfoot><tr><td colspan=" + columnCount + " class=\"view_more_accordian\" style=\"text-align:center;\">View more</td></tr></tfoot>")
  .insertAfter("tbody");

в

$("<tfoot><tr><td colspan=" + columnCount + " class=\"view_more_accordian\" style=\"text-align:center;\">View more</td></tr></tfoot>")
  .insertAfter(this);

Также вы можете избежать использования первого .each (на основе вашего показанного кода), вместо этого вы можете просто сделать

$(".accordion-group table tbody").each(function () {
...
});

Это работало отлично. Но теперь мой босс хочет, чтобы tr был вставлен в tbody как последний ряд. Так что это относится к телу. И попытка использовать jQuery append (". Last") не работает. Есть идеи. Заранее спасибо!
@ MWA Извините, не понимаю, можете ли вы поставить их на скрипку?
@ MWA Я не понял, но, возможно, вам придется сделать .append($(".last")) . Однако, если мой оригинальный ответ сработал, вы не против принять его, и вы можете добавить новый вопрос для вашего запроса.
@ MWA Видел, что вы обновили свой вопрос, не видя HTML, я не могу сказать, но попробуйте. $("<tr><td colspan=" + columnCount + " class=\"view_more_accordian\" style=\"text-align:center;\">View more</td></tr>").insertAfter(row.last()); Вам не нужно добавлять класс .last