Сделать древовиднй вывод из div

Рейтинг: 0Ответов: 1Опубликовано: 14.11.2014

Нужно, чтобы при клике на блок class="trg_no_active открывались скрытые блоки, которые находятся под тем блоком, на который кликнули. Но нужно открыть не все, а только, которые имеют отступ текущий + 25. Т.е. если кликнем на блок, который имеет отступ 25, то открыть 25+25=50 отступ:

<div align="center" id="wrapper"> 
         <div style="width: 990px; height: 40px;"> 
            <div class="block_for_users_name" style="width: 120px;">Логин</div> 
            <div class="block_for_users_name" style="width: 80px;">Пароль</div> 
            <div class="block_for_users_name" style="width: 200px;">Название</div> 
            <div class="block_for_users_name" style="width: 40px;">А</div> 
            <div class="block_for_users_name" style="width: 40px;">B</div> 
            <div class="block_for_users_name" style="width: 40px;">C</div> 
            <div class="block_for_users_name" style="width: 40px;">D</div> 
            <div class="block_for_users_name" style="width: 40px;">прицеп</div> 
            <div class="block_for_users_name" style="width: 120px;">Город</div> 
            <div class="block_for_users_name" style="width: 100px;">Права</div> 
            <div class="block_for_users_name" style="width: 150px;">Действия</div> 
         </div>

 <div style="width: 990px; height: 40px; "><div style="margin-left:0px; width: 120px; text-align:left" class="block_for_users"> 
            <div> 
            <div class="trg_no_active" data="0"></div> 
            <div style="float:left">elisov</div> 
            </div></div>

            <div class="block_for_users" style="width: 80px;">698698</div>

                <div class="block_for_users" style="width: 200px;">Елисов Алексей</div> 
                <div class="block_for_users" style="width: 40px;">120</div> 
            <div class="block_for_users" style="width: 40px;">120</div> 
            <div class="block_for_users" style="width: 40px;">120</div> 
            <div class="block_for_users" style="width: 40px;">120</div> 
            <div class="block_for_users" style="width: 40px;">120</div> 
            <div class="block_for_users" style="width: 120px;"></div> 
            <div class="block_for_users" style="width: 100px; padding-top:3px;"><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span>  </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Anna72</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">zina123</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Lena1122</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Vova1212</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Xeniya</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Tanya</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Iranovak</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Kolya1</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Margo1</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Most58</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Er-4141</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Georgiy78</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Saratov64</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Galina64</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Marks64</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Saransk</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Tonya1</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">DBRNJHBZ</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">RUSLAN</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">MARAT</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:50px; width: 120px;" data="50" class="block_for_users">

             <div class="trg_no_active" data="50"></div> 
             <div style="float:left">Aleksey</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Oksana111</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Nadejda11</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">venera</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div class="block_for_users_no_active"> 
             <div style="margin-left:25px; width: 120px;" data="25" class="block_for_users">

             <div class="trg_no_active" data="25"></div> 
             <div style="float:left">Stpatrik</div> 
              </div>

            <div class="block_for_users" style="width: 100px; padding-top:3px; "><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span> </div> 
            </div>

            <div style="width: 990px; height: 40px; "><div style="margin-left:0px; width: 120px; text-align:left" class="block_for_users">
            <div> 
            <div class="trg_no_active" data="0"></div> 
            <div style="float:left">shamsheev</div> 
            </div></div>

            <div class="block_for_users" style="width: 80px;">5743567</div>

                <div class="block_for_users" style="width: 200px;">Юрий</div> 
                <div class="block_for_users" style="width: 40px;">180</div> 
            <div class="block_for_users" style="width: 40px;">180</div> 
            <div class="block_for_users" style="width: 40px;">220</div> 
            <div class="block_for_users" style="width: 40px;">220</div> 
            <div class="block_for_users" style="width: 40px;">220</div> 
            <div class="block_for_users" style="width: 120px;"></div> 
            <div class="block_for_users" style="width: 100px; padding-top:3px;"><div class="icon_for_blocked"></div><div class="icon_for_add_users"></div><div class="icon_for_add_request"></div></div> 
            <div class="block_for_users" style="width: 150px;"><span>Изменить</span>  </div> 
            </div>

</div>

var n=Number(margin); // 25 
var k=n+25;

var i=$(this).attr("id"); // 6 
$("div[data="+k+"]").each(function(){

if ($(this).attr("data")==n) return false;

$(".block_for_users_no_active[data="+k+"]").show();

});

Проблема в том, что мне нужно показать скрытые div'ы, которые идут после текущего, и не показывать те, которые идут выше дерева. div'ы идут друг за другом. Вложения определяются отступом margin. Нужно остановить цикл, когда будет вхождение margin, равное текущему.

Ответы

▲ 1

А чтоб меня... Пока доскроллил до конца, думал колёсико мыши поломаю. )) @japan_parts, чтоб получить следующий элемент, используют метод .next(), а высчитывание каких-то отступов, да еще и в цикле - это у вас явно не правильный подход.