Javascript-форум - Показать сообщение отдельно - Как выбрать элементы в пределах конкретного блока

Siend · #13 (**permalink**) 25.01.2016, 14:16

Хотя фигню ляпнул, держи раб. вариант. правда думаею его можно сделать и оптимальнее.

<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();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).text(shownews)
});
});
  </script>

<!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();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).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>