Как скрыть элементы с помощью jQuery?

Question

[budyakov]

Необходимо скрыть элементы таблицы на странице. Сама таблица не имеет ни класса, ни id. Элементы, которые нужно скрыть тоже не имеют каких либо идентификаторов. Ниже структура таблицы. Необходимо скрыть 4 нижних элемента строк таблицы?

<table width="95%" border="0" cellspacing="0" cellpadding="3">
		<tbody>
        <tr>...</tr>
		<tr>...</tr>
		<tr id="first_id">...</tr>
		<tr id="second_id">...</tr>
		<tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
</tbody></table>

Answer 1

[Юрий Лобанов]

Если структура таблицы всегда такая, то можно сделать так:

#second_id ~ tr:nth-child(n+6) {
  display:none;
}

codepen.io/iiil/pen/FHtza
без js вообще. Поддержка начиная от ie9 и все актуальные браузеры.
Если количество строк разное, и всегда надо скрывать последние четыре строки:

#second_id ~ tr:nth-last-child(-n + 4)) {
  display:none;
}

codepen.io/iiil/pen/oEnpz
Поддержка такая же.

Если нужно все же на js, вот пример на jq для первого случая
$('#second_id ~ tr:nth-child(n+6)').hide();
Для второго случая

$('#second_id ~ tr:nth-last-child(-n + 4)').hide();

Comments

[Илья Лесных]

$(selector).each(function(){ $(this).method(); }) === $(selector).method()

[Юрий Лобанов]

@Aliance да я заметил потом, не стал переделывать уже.

[Юрий Лобанов]

@Aliance исправил, спасибо за замечание.

Answer 2

[chupok]

<script>
	$(document).ready(function(){
		// + - переход от элемента с известным ID (из примера) к следующему смежному
		// ~ * - все последующие смежные элементы
		// hide() - скрыть выбранные элементы
		$('#second_id + ~ *').hide();
	});
</script>

Такие "знаки препинания" называются селекторами.

Comments

[budyakov]

Выглядит круто, но почему-то не работает : ( попробовал как боевом примере, так и на тестовом файле

[chupok]

jsfiddle.net/87b2E/1

[chupok]

JQuery подключили?

[Юрий Лобанов]

@chupok зачем здесь вообще jquery? Вопрос решается на чистом css.

[chupok]

@iiil Разумеется, можно через nth-child() применить display: none

Answer 3

[Алексей]

Уточните вопрос. Элементами строки являются колонки в этой строке. Что нужно скрыть?
1. 4 нижних строки.
2. 4 последних последних колонки в каждой строке.

Answer 4

[Алексей Ванин]

Таблицу всеравно надо как то идентифицировать, для селектора, но если она одна: jsfiddle.net/87b2E

Answer 5

[budyakov]

Нужно скрыть 4 нижних элемента tr (4 нижних строки). Контент в них динамический, так что скрывать элементы внутри строк нельзя.

Comments

[chupok]

То есть вам необходимо скрыть последние четыре строки в таблице? Если так, то смотрим выше. Или вы хотите убрать из последних четырех строк теги tr, оставив само содержимое? Если так, то вопрос: зачем? Я в конец запутался.

[budyakov]

Я имею ввиду обращаться к элементам внутри строк нельзя. Строки вместе с содержимым нужно скрыть.

Answer 6

[Maksim Zverev]

Если надо скрыть последние 4 строчки и можно на таблицу навесить идентификатор то вот пример jsfiddle.net/6wnMT

Comments

[budyakov]

К сожалению навесить идентификатор на таблицу, но есть идентификатор div, в который вложена таблица и она в нем одна. Правда вложено в