|
Как выбрать элементы в пределах конкретного блока
Здравствуйте форумчане.
Имеется следующая разметка: <table> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> </table> И код, для сворачивания-разворачивания списка элементов: <script> var news = 2; // - количество отображаемых новостей hidenews = "- скрыть старые новости"; shownews = "+ показать все новости"; $(".stroka").each(function (i) { // - нумерация идентификаторов строк $(this).prop("id", "news" + i); }); $(".archive").html( shownews ); $(".news:not(:lt("+news+"))").hide(); $(".archive").click(function (e){ e.preventDefault(); if( $(".news:eq("+news+")").is(":hidden") ) { $(".news:hidden").show(); $(".archive").html( hidenews ); } else { $(".news:not(:lt("+news+"))").hide(); $(".archive").html( shownews ); } }); </script> Все работает, но проблема в том, что таких строк с дивами, у которых одинаковые классы - несколько, потому действие скрипта применяется ко всем строкам сразу.:( Я добавил динамическую нумерацию идентификаторов ячеек td, но как теперь реализовать, чтобы сворачивались-разворачивались дивы именно своей ячейки - не знаю.. Возможно я вообще не там копаю. Короче, нуб просит помощи) |
Открывашка 248 спойлер для новостей
Socpost,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var news = 2; // - количество отображаемых новостей hidenews = "- скрыть старые новости"; shownews = "+ показать все новости"; $(".stroka").each(function() { var b = $(".news", this).slice(news).hide(); $(".archive", this).click(function(a) { a.preventDefault(); a = +b.toggle().is(":hidden"); $(this).text([hidenews, shownews][a]) }).text(shownews) }); }); </script> </head> <body> <table> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> </table> </body> </html> |
Добавлю, что можно избежать использование:
a.preventDefault(); достаточно удалить атрибут href из ссылок, ссылка примет вид: <a class="archive"> Упадет также и все оформление - подчеркивание и синий, но вообщем-то не очень понятно зачем вообще использовать <a> если затем ему отрубать обработчик) |
Спасибо большое! Помогли сильно сэкономить время!:)
|
Н-да.. Вылез очередной косяк: оказалось что две соседние ячейки должны тоже показывать-скрывать элементы синхронно с первой. Вот, собственно, разметка:
<table> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> </table> Т.е. при нажатии ссылки в td class="stroka2", должны прятаться или появляться дивы во всех 3х ячейках..:( |
Цитата:
|
Цитата:
Я же правильно заменил: $("tr").each(function() { ? |
Socpost,
так? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var news = 2; // - количество отображаемых новостей hidenews = "- скрыть старые новости"; shownews = "+ показать все новости"; news++; $("tr").each(function(c) { var b = $(".news:nth-child(n+"+news+")", this).hide(); $(".archive", this).click(function(a) { a.preventDefault(); a = +b.toggle().is(":hidden"); $(this).text([hidenews, shownews][a]) }).text(shownews) }); }); </script> </head> <body> <table> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> </table> </body> </html> |
Цитата:
|
Подскажите, пожалуйста, почему при добавлении параметров в метод toggle (скорость анимации), текст ссылки изменяется только один раз?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var news = 2; // - количество отображаемых новостей hidenews = "- скрыть\u00A0старые\u00A0новости"; shownews = "+ показать\u00A0все\u00A0новости"; news++; $("tr").each(function(c) { var b = $(".news:nth-child(n+"+news+")", this).hide(); $(".archive", this).click(function(a) { a.preventDefault(); a = +b.toggle(1000).is(":hidden"); $(this).text([hidenews, shownews][a]) }).text(shownews) }); }); </script> </head> <body> <table> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"><nobr></nobr></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> <tr> <td class="stroka"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka1"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> </td> <td class="stroka2"> <div class="news">Первая новость</div> <div class="news">Вторая новость</div> <div class="news">Третья новость</div> <div class="news">Четвертая новость</div> <a class="archive" href="#"></a> </td> </tr> </table> </body> </html> |
Часовой пояс GMT +3, время: 09:36. |
|