javascript - 剣道メニューでid値を取得する方法

Question

プロジェクトで剣道メニューを使用しています。選択した項目をクリックしたときに id 値を取得したい。onSelect イベントを使用したところ、選択したアイテムのテキストを取得できました。id 値を取得するにはどうすればよいですか?

Answer 1

HTML5データ属性を使用してこれを実現できます。

HTML

<div id="example" class="k-content">
    <ul id="menu">
        <li>
            First Item
            <ul>
                <li data-id="12345">Sub Item 1 with ID</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li>
            Second Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li>
            Third Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li>
            Fourth Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li>
            Fifth Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
    </ul>
</div>

そしてJavascript：

        <script>
            $(document).ready(function() {


                function onSelect(e) {
                    var id = $(e.item).attr('data-id');
                }

                $("#menu").kendoMenu({
                    select: onSelect               
                });
            });
        </script>

Answer 2

初期化元の UL/LI 構造体に ID を設定できます (Robotsushi の回答を確認してください)。ただし、メニューを動的に初期化したい場合は、次のようなものを使用できます - http://jsfiddle.net/MMRCf/8/