За последние 24 часа нас посетили 17636 программистов и 1655 роботов. Сейчас ищут 937 программистов ...

Работа со списком с помощью jQuery

Тема в разделе "JavaScript и AJAX", создана пользователем Mr. T, 29 авг 2011.

  1. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Здравствуйте,
    есть, к примеру, такая страница
    HTML:
    1. <!doctype html>
    2. <meta charset="utf-8">
    3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    4. $(function(){
    5.     $('ul li a').click(function(){
    6.         var selected_item = $('ul li a').index(this);
    7.         var amount_of_menu_items = $('ul li a').size();
    8.         var amount_of_sub_menu_items = 0;
    9.         for(var i = selected_item; i < amount_of_menu_items; i++){
    10.             if($('ul li').eq(i).hasClass('sub-item') == false){
    11.                 break;
    12.             }else{
    13.                 amount_of_sub_menu_items++;
    14.             }
    15.         }
    16.         alert(amount_of_sub_menu_items);
    17.     });
    18. });
    19. </head>
    20. <ul>
    21. <li><a href="/item-1/" rel="bookmark">item-1</a></li>
    22. <li class="sub-item" style="margin-left: 20px;"><a href="/sub-item-1/" rel="bookmark">sub-item-1</a></li>
    23. <li class="sub-item" style="margin-left: 20px;"><a href="/sub-item-2/" rel="bookmark">sub-item-2</a></li>
    24. <li class="sub-item" style="margin-left: 40px;"><a href="/sub-item-3/" rel="bookmark">sub-item-3</a></li>
    25. <li><a href="/item-2/" rel="bookmark">item-2</a></li>
    26. <li class="sub-item" style="margin-left: 20px;"><a href="/sub-item-4/" rel="bookmark">sub-item-4</a></li>
    27. <li><a href="/item-3/" rel="bookmark">item-3</a></li>
    28. </ul>
    29. </body>
    30. </html>
    . Нужно выяснить сколько элементов содержит меню с классом sub-item после выбраного пункта и скрыть их, с возможностью бесконечной вложености. Застрял на цикле, прошу помощи.
     
  2. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    Что за странная структура меню, и почему ты не используешь вложенные ul, например? Я вообще не вижу никакой вложенности, не говоря уж о бесконечной.
     
  3. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Знаю, что странная, но меню строится с помощью рекурсии, а я хз как вложенность в таком случае показать, поэтому решил через отступ делать, так проще...
     
  4. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    ясное дело что с помощью рекурсии. Вопрос не в том через отступ или не через отступ, а в том, почему этот отступ достигается таким неочевидным и неудобным для обработки путем.

    покажи свою рекурсию
     
  5. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    PHP:
    1. <?php
    2. function list_of_categories () {
    3.     global $db, $list_of_categories, $list_of_categories_html;
    4.     $result = $db->query ('SELECT * FROM `' . prefix . '_category` ORDER BY `position`, `category_id`;');
    5.     $num_rows = $db->num_rows ($result);
    6.     $list_of_categories = array ();
    7.     for ($i = 0; $i < $num_rows; $i++) {
    8.         $row = $db->fetch_array ($result);
    9.         $list_of_categories[$i]['category_id'] .= $row['category_id'];
    10.         $list_of_categories[$i]['alternative_name'] .= $row['alternative_name'];
    11.         $list_of_categories[$i]['title'] .= $row['title'];
    12.         $list_of_categories[$i]['parent_category'] .= $row['parent_category'];
    13.         $list_of_categories[$i]['show'] .= $row['show'];
    14.     }
    15.     $list_of_categories_html .=  '<ul>' . PHP_EOL;
    16.     list_of_categories_tree (0, 0);
    17.     $list_of_categories_html .= '</ul>' . PHP_EOL;
    18.     return $list_of_categories_html;
    19. }
    20. function list_of_categories_tree ($parent_category, $level) {
    21.     global $list_of_categories, $list_of_categories_html;
    22.     foreach ($list_of_categories as $key => $value) {
    23.         if ($list_of_categories[$key]['parent_category'] == $parent_category) {
    24.             if ($level != 0) {
    25.                 $margin_left = 20 * $level;
    26.                 $list_of_categories_html .= '<li class="sub-item" style="margin-left: ' . $margin_left . 'px;"><a href="/' . $list_of_categories[$key]['alternative_name']}/ . '" rel="bookmark">' . $list_of_categories[$key]['title'] . '</a></li>' . PHP_EOL;
    27.             } else {
    28.                 $list_of_categories_html .= '<li><a href="/' . $list_of_categories[$key]['alternative_name']} . '/" rel="bookmark">' . $list_of_categories[$key]['title'] . '</a></li>' . PHP_EOL;
    29.             }
    30.             $level++;
    31.             list_of_categories_tree ($list_of_categories[$key]['category_id'], $level--);
    32.         }
    33.     }
    34. }
    35. ?>
     
  6. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    oh shit!
    PHP:
    1. <?
    2.  function list_of_categories () {
    3.     global $db, $list_of_categories, $list_of_categories_html;
    4.     $result = $db->query ('SELECT * FROM `' . prefix . '_category` ORDER BY `position`, `category_id`;');
    5.     $num_rows = $db->num_rows ($result);
    6.     $list_of_categories = array ();
    7.    
    8.     while ($row = mysql_fetch_array($result)){
    9.         $list_of_categories[]=$row;
    10.     }
    11.    
    12.     $list_of_categories_html .= list_of_categories_tree($list_of_categories);
    13.  
    14.     return $list_of_categories_html;
    15.  }
    16.  
    17.  
    18. function list_of_categories_tree ($list_of_categories, $parent_id = null) {
    19.     $menu_html = '<ul class="' . ($parent_id === null?'top_level':'sub_menu') . '" >';
    20.    
    21.     foreach ($list_of_categories as $row)
    22.    {
    23.         if ($row['parent_category'] == $parent_id)
    24.         {
    25.             $menu_html .= '<li>';
    26.             $menu_html .= '<a href="/' . $row['alternative_name'] . '/" rel="bookmark">' . $row['title'] . '</a>';
    27.             $menu_html .= list_of_categories_tree($list_of_categories, $row['category_id']);
    28.             $menu_html .= '</li>';
    29.         }
    30.    }
    31.     $menu_html .= "</ul>";
    32.     return $menu_html;
    33. }
    Если что-то непонятно - спрашивай.
     
  7. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Немного не понял как массив $list_of_categories заполняется и у меня что-то оно не трудится... Массив выходит вложенный, вида
    Код (Text):
    1. array(1) {
    2.   [0]=>
    3.   array(16) {
    4.     [0]=>
    5.     string(1) "6"
    6.     ["category_id"]=>
    7.     string(1) "6"
    8.     [1]=>
    9.     string(1) "0"
    10.     ["position"]=>
    11.     string(1) "0"
    12.     [2]=>
    13.     string(9) "subalbum3"
    14.     ["alternative_name"]=>
    15.     string(9) "subalbum3"
    16.     [3]=>
    17.     string(19) "субальбом3"
    18.     ["title"]=>
    19.     string(19) "субальбом3"
    20.     [4]=>
    21.     string(0) ""
    22.     ["description"]=>
    23.     string(0) ""
    24.     [5]=>
    25.     string(0) ""
    26.     ["keywords"]=>
    27.     string(0) ""
    28.     [6]=>
    29.     string(1) "5"
    30.     ["parent_category"]=>
    31.     string(1) "5"
    32.     [7]=>
    33.     string(3) "yes"
    34.     ["show"]=>
    35.     string(3) "yes"
    36.   }
    37. }
    . У меня такой код
    PHP:
    1. <?php
    2. function list_of_categories () {
    3.     global $db;
    4.     $result = $db->query ('SELECT * FROM `' . prefix . '_categories` ORDER BY `position`, `category_id`;');
    5.     $list_of_categories = array ();
    6.     while ($row = $db->fetch_array ($result)) {
    7.         $list_of_categories[] = $row;
    8.     }
    9.     $list_of_categories_html = list_of_categories_tree ($list_of_categories);
    10.     return $list_of_categories_html;
    11. }
    12. function list_of_categories_tree ($list_of_categories, $parent_category = null) {
    13.     $list_of_categories_html .= '<ul class="' . ($parent_category === null ? 'top_level' : 'sub_menu') . '">';
    14.     foreach ($list_of_categories as $row) {
    15.         if ($row['parent_category'] == $parent_category) {
    16.             $list_of_categories_html .= '<li>';
    17.             $list_of_categories_html .= '<a href="/' . $row['alternative_name'] . '/" rel="bookmark">' . $row['title'] . '</a>';
    18.             $list_of_categories_html .= list_of_categories_tree ($list_of_categories, $row['category_id']);
    19.             $list_of_categories_html .= '</li>';
    20.         }
    21.     }
    22.     $list_of_categories_html .= '</ul>';
    23.     return $list_of_categories_html;
    24. }
    25. ?>
    PHP:
    1. <?php
    2. var_dump ($parent_category);
    3. ?>
    Код (Text):
    1. NULL
     
  8. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Разобрался, вторую функцию нужно было объявлять, как
    PHP:
    1. <?php
    2. function list_of_categories_tree ($list_of_categories, $parent_category) {
    3. ?>
    , тогда работает, спасибо за помощь.
     
  9. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Меню сейчас строится, но единственное, что заметил, так это то, что пункт меню имеет вид
    HTML:
    1. <li><a href="/category-2/" rel="bookmark">category-2</a><ul></ul></li>
    , т.е. пустой список есть еще, на валидность это не влияет, но все же хотелось бы без него...
     
  10. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    или каким-то образом проверять наличие детей, или решать в лоб.

    Поставить
    PHP:
    1. <?
    2. $list_of_categories_html  = str_replace('<ul></ul>','',$list_of_categories_html);
    перед return в function list_of_categories
     
  11. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Решать в лоб однозначно круче :)