условный селектор jQuery для строк таблицы
У меня есть таблица с данными в:
<td> item </td><td> order code </td><td> price </td>
Я обрабатываю таблицу с jQuery, который должен найти код заказа:
$.each($('.productList tbody tr'), function() {
var orderCode = $(this).find('td:eq(1)').html().trim();
// do stuff
});
Если нет никаких продуктов, таблица показывает сообщение:
<td colspan="3"> There are no products to display </td>
Вышеупомянутая строка заставляет функцию jQuery разбомбить. Что самый устойчивый путь состоит в том, чтобы использовать условный селектор для игнорирования "продуктов" строка? Есть ли селектор для colspan="1" или colspan is not set или независимо от того, что это должно было бы быть?
6 ответов
Не уточняйте свой селектор, он не будет хорошо масштабироваться, потому что jQuery должен будет оценивать каждый дочерний элемент. Вместо этого избегайте ошибки ...
$('.productList tbody tr').each(function() {
var orderCode = $(this).find('td:eq(1)');
if(orderCode.length > 0) { // Make sure it exists
orderCode = orderCode.html().trim();
// do stuff
}
});
Если вы можете изменить способ создания таблицы, использование классов будет более чистым решением:
<td class="item-name"> item </td>
<td class="order-code"> order code </td>
<td class="item-price"> price </td>
Затем выберите только желаемый класс:
var orderCode = $(this).find('td.order-code').html().trim();
if(orderCode)
{
//do stuff
}
Это также даст вам большую гибкость в стилизации таблицы с помощью CSS и вашего кода. не сломается, если вы добавите или измените порядок столбцов.
Вы можете проверить, сколько существует td s:
$.each($('.productList tbody tr'), function() {
var tds = $(this).find('td');
if(tds.length >= 2) {
var orderCode = tds.eq(1).html().trim();
// do stuff
}
});
Дополнительная фильтрация того, что написано SLaks
$ ("table tbody tr td: nth-child (2): contains ('code')")
Используйте метод .attr(). Посмотрите api.jquery.com и это должно помочь вам разобраться, как получить атрибут colspan из ваших ячеек.
Примерно так:
$('.productList tbody tr:has(td:nth-child(2))').each(function() {
...
});
Будет выбрано только элементы, у которых есть , который является вторым дочерним элементом своего родителя. (селектор nth-child основан на единице)
Похожие вопросы: