Имя: Пароль:
IT
Веб-мастеринг
 Как получить значение ID дерево ☑
0 antihacker
 
07.10.17
✎
17:09
Всем привет !

Вот работающий код


<head>

    <link rel="stylesheet" href="css/style.css">

        </script><script src="http://code.jquery.com/jquery-1.7.2.min.js"; type="text/javascript" > </script>

    <script type="text/javascript">

        $( document ).ready( function( ) {
                $( '.tree li' ).each( function() {
                        if( $( this ).children( 'ul' ).length > 0 ) {
                                $( this ).addClass( 'parent' );
                        }
                });

                $( '.tree li.parent > a' ).click( function( ) {

                alert($(this).attr('id'));
                        $( this ).parent().toggleClass( 'active' );
                        $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
                });

                $( '#all' ).click( function() {

                    $( '.tree li' ).each( function() {
                        $( this ).toggleClass( 'active' );
                        $( this ).children( 'ul' ).slideToggle( 'fast' );
                    });
                });

        });

    </script>
</head>
<body>

<div class="tree">
        <button id="all">Toggle All</button>

<ul>
        <li id = "1"><a>First Level</a>
            <ul>
                <li><a>Second Level</a></li>
                <li><a>Second Level</a></li>
                <li><a>Second Level</a></li>
            </ul>
        </li>
        <li  id = "2"><a>First Level</a>
            <ul>
                <li><a>Second Level</a>
                    <ul>
                        <li><a>Third Level</a></li>
                        <li><a>Third Level</a></li>
                        <li><a>Third Level</a>

                        </li>
                    </ul>
                </li>
                <li><a>Second Level</a></li>
            </ul>
        </li>
        <li id = "3"><a>First Level</a>
            <ul>
                <li><a>Second Level</a></li>
                <li><a>Second Level</a></li>
            </ul>
        </li>
</ul>
</div>
</div>

</body>
</html>

Как получить значение ID выбранного элемента
1 antihacker
 
07.10.17
✎
18:00
Пробовал такой вариант


<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demo</title>
   </script><script src="http://code.jquery.com/jquery-1.7.2.min.js"; type="text/javascript" > </script>
</head>
<body>

<ul ID="1">
  <li ID="2">item 1
    <ul ID="3">
      <li ID="4">sub item 1-a</li>
      <li ID="5">sub item 1-b</li>
    </ul>
  </li>
  <li ID="6">item 2
    <ul ID="7">
      <li ID="8">sub item 2-a</li>
      <li ID="9">sub item 2-b</li>
      <li ID="10">sub item 2-b11</li>
      <li ID="11">sub item 2-b22</li>
    </ul>
  </li>
</ul>

<script type="text/javascript">
function handler( event ) {
  var target = $( event.target );

   alert(event.target.id);

  if ( target.is( "li" ) ) {

    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>

</body>
</html>


Все работает на ура.

Но почему    alert(event.target.id); выполняеться 2 раза при клике ?
2 asady
 
08.10.17
✎
21:03
ну а как ты хотел
для каждого тега ul клик и срабатывает
поскольку они у тебя вложенные - получаешь закономерный результат
3 Юрий Лазаренко
 
08.10.17
✎
21:48
(1) Запрети всплывание событий
4 Юрий Лазаренко
 
08.10.17
✎
21:49
https://learn.javascript.ru/event-bubbling