Как выбрать элементы в пределах конкретного блока

@socpost · Регистрация: 22.01.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте форумчане.
Есть такой код, для сворачивания разворачивания списка элементов. Все работает, но проблема в том, что таких ХТМЛ-блоков с одинаковыми классами - несколько, потому действие скрипта применяется ко всем им сразу.

Я добавил динамическую нумерацию идентификаторов ячеек td, но как теперь реализовать корректное обращение при нажатии на ссылку именно к своему td не знаю.. Возможно я вообще не там копаю. Короче, нуб просит помощи)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
 
  
  </style>
</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>
  <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>
</body>
</html>

@fanatikus · 22.01.2016, 18:37

может как-то так, если я правильно понял

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a data-flag="1" 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 data-flag="1" 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 data-flag="1" class="archive" href="#">+ показать все новости</a>
  </td>
  </tr>
</table>                    
<script>
    $(function(){
        var col = 2;
        var open = '+ показать все новости';
        var close = '- скрыть старые новости';
        $(".stroka").each(function (i,v) {   // - нумерация идентификаторов строк
            $(v).children('div').each(function(ii,vv){
                if(ii >= col){
                    $(vv).hide();
                }
            });
        })
        $('.archive').click(function(e){ 
            e.preventDefault();
           
            var that = $(this);
            var d_f = that.attr('data-flag');
            var d = that.parent().children('div');
            
            $(d).each(function(i,v){
                if(i >= col && d_f=='1'){
                    $(v).show();
                    that.attr('data-flag','0');
                    that.html(close);
                }
               
                if(i >= col && d_f=='0'){
                    $(v).hide();
                    that.attr('data-flag','1');
                    that.html(open);
                }
            })
        })
    })
</script>

@socpost · 01.02.2016, 17:34 **[ТС]**

Здравствуйте. Прошу помочь со следующим кодом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
    <link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
 .flagi{
 width: 220px;
 text-align: center;
 
 }
 .summa{
 text-align: center;
 }
 .moregeo{
font-size: 13px;
line-height: 15px;
 
 }
 .data{
 vertical-align: middle;
 }
 .archive{
text-decoration: none;
color: #718faa;  
 }
 .imgview{
width:60px;
vertical-align: middle;
}
.news{
display:inline-block;
 
}
    </style>
</head>
<body>
 <script>
  $(function(){
    var news = 6; // - количество отображаемых новостей
    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.is(":hidden");
        b.slideToggle(1000);
        $(this).text([shownews,hidenews][a])
    }).text(shownews)
});
});
  </script>
 
 
<div class="tab_content">
 
<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>
 
<!-- Строка данных -->
<tr style="font-size: 15.5px;">
<td data-th="Name" class="data"><img class="imgview" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Мужские духи с феромонами Sexy Life</td>
<td data-th="ECP" class="data">0</td>
<td data-th="CR" class="data">0</td>
<td data-th="Условия" class="data"><nobr>Подтвержденная заявка</nobr></td>
 
<td class="stroka" data-th="Выплата">
 
 
 
 
<div class="flagi">
 <div class="summa">
<nobr>450-500 руб.</nobr>
</div>
 
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/b/Belarus.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/u/Ukraine.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Russian_Federation.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/k/Kazakhstan.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/m/Moldova.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Romania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Lithuania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Latvia.png" />
</div>
<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</div>
 
 
 
</td>
</tr>
<!-- *** -->
 
 
</table>
</div>
</div>
</body>
</html>

Все работает - лишние элементы прячутся и открываются, но из-за display:inline-block; анимация получается "рваной": ссылка прыгает, вместо того, чтобы плавно двигаться с контентом.((

Новые блоги и статьи Все статьи Все блоги /
Функция установки текстового статуса в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .