Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2016, 14:01
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Как выбрать элементы в пределах конкретного блока
Здравствуйте форумчане.
Имеется следующая разметка:
<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, но как теперь реализовать, чтобы сворачивались-разворачивались дивы именно своей ячейки - не знаю.. Возможно я вообще не там копаю. Короче, нуб просит помощи)

Последний раз редактировалось Socpost, 22.01.2016 в 14:33. Причина: упорядочивание
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2016, 14:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Открывашка 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>

Последний раз редактировалось рони, 22.01.2016 в 14:26.
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2016, 14:33
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Добавлю, что можно избежать использование:
a.preventDefault();

достаточно удалить атрибут href из ссылок, ссылка примет вид:
<a class="archive">

Упадет также и все оформление - подчеркивание и синий, но вообщем-то не очень понятно зачем вообще использовать <a> если затем ему отрубать обработчик)
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2016, 14:39
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Спасибо большое! Помогли сильно сэкономить время!
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2016, 15:39
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Н-да.. Вылез очередной косяк: оказалось что две соседние ячейки должны тоже показывать-скрывать элементы синхронно с первой. Вот, собственно, разметка:
<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х ячейках..
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2016, 15:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Socpost
Т.е. при нажатии ссылки в td class="stroka2", должны прятаться или появляться дивы во всех 3х ячейках..
либо я вас не понимаю, либо строка 11 $("tr").each
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2016, 16:20
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Сообщение от рони Посмотреть сообщение
либо я вас не понимаю, либо строка 11 $("tr").each
Спасибо за ответ. Работает, но не синхронно: в первой ячейке видно заданное кол-во дивов, как и положено, а 2-ю и 3-ю прячет начисто, а должно быть как в первой.
Я же правильно заменил:
$("tr").each(function() { ?
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2016, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2016, 16:34
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Сообщение от рони
так?
ИМЕННО! Спасибо Вам большое!
Ответить с цитированием
  #10 (permalink)  
Старый 25.01.2016, 13:35
Аватар для Socpost
Интересующийся
Отправить личное сообщение для Socpost Посмотреть профиль Найти все сообщения от Socpost
 
Регистрация: 22.01.2016
Сообщений: 18

Подскажите, пожалуйста, почему при добавлении параметров в метод 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выбрать элемент, который отправлялся ajax Nifler jQuery 5 20.08.2015 08:42
Как выбрать элемент, который отправлялся ajax Nifler jQuery 2 20.08.2015 08:25
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Вставка блока php в js...Как сделать? reup Общие вопросы Javascript 2 30.07.2009 11:02