0

このHTMLでjQueryを使用して、クリックした以外のすべてのdivを削除しようとしています:

<div id="categories-picker">
    <h2>Seleccione una categoría</h2>
    <div class="product-left" id="cstep1">
        <ul id="step1">
            <li><a data-resp="main" data-id="1" class="step" href="#">Monitors</a></li>
            <li><a data-resp="main" data-id="2" class="step" href="#">Cameras</a></li>
            <li><a data-resp="main" data-id="4" class="step" href="#">Scanners</a></li>
            <li><a data-resp="main" data-id="5" class="step" href="#">Printers</a></li>
            <li><a data-resp="main" data-id="6" class="step" href="#">Mice and Trackballs</a></li>
            <li><a data-resp="main" data-id="7" class="step" href="#">Mac</a></li>
            <li><a data-resp="main" data-id="8" class="step" href="#">PC</a></li>
            <li><a data-resp="main" data-id="9" class="step" href="#">Software</a></li>
            <li><a data-resp="main" data-id="10" class="step" href="#">Components</a></li>
            <li><a data-resp="main" data-id="11" class="step" href="#">Phones &amp;amp; PDAs</a></li>
            <li><a data-resp="main" data-id="12" class="step" href="#">Desktops</a></li>
            <li><a data-resp="main" data-id="13" class="step" href="#">MP3 Players</a></li>
            <li><a data-resp="main" data-id="14" class="step" href="#">Laptops &amp;amp; Notebooks</a></li>
            <li><a data-resp="main" data-id="15" class="step" href="#">Windows</a></li>
            <li><a data-resp="main" data-id="16" class="step" href="#">Macs</a></li>
            <li><a data-resp="main" data-id="17" class="step" href="#">Tablets</a></li>
        </ul>
    </div>
    <div id="cstep2" class="product-left">
        <ul id="step2">
            <li><a href="#" data-id="3" class="step">Web Cameras</a></li>
            <li><a href="#" data-id="21" class="step">Test4</a></li>
            <li><a href="#" data-id="22" class="step">Test5</a></li>
        </ul>
    </div>
    <div id="cstep3" class="product-left">
        <ul id="step3">
            <li><a href="#" data-id="23" class="step">Test6</a></li>
            <li><a href="#" data-id="24" class="step">Test7</a></li>
            <li><a href="#" data-id="25" class="step">Test8</a></li>
            <li><a href="#" data-id="26" class="step">Test9</a></li>
        </ul>
    </div>
</div>

たとえば、上記のコードによれば、クリックすると次のものaが削除されます。要素をクリックすると、呼び出しからの新しい要素で再描画する必要があります。私はこのコードを書きましたが、すべての DIV を削除するため機能しませんが、それ以上作成することはできません。たとえば、 の任意の要素をクリックすると発生します。また、配列に基づく方法と、エラーを生成する jQuery 関数に基づく方法の 2 つの方法を試しました。ここにブートを残します:a#data-id=1div#cstep1div#cstep2div#cstep3a#data-id=3div#cstep3divs$.ajaxdiv#cstep1

アレイのバージョン

    $(function() {
        var k = 1;
        // Create the array for store every created DIV in order to 
        var divs = new Array();

        // Put the first element of the array
        divs[k - 1] = "cstep" + k;

        // Each time any a.step is clicked ...
        $("#categories-picker").on("click", "a.step", function() {
            var id = $(this).attr('data-id');
            var resp = $(this).attr('data-resp');
            var count = $("#categories-picker > div").size();
            var parent_id = $(this).closest("div").attr("id");

            // Remove elements from the array and remove divs from view
            for (var l = 0; l < divs.length; l++) {
                if (divs[l] == parent_id) {
                    for (var o = (l + 1); o < divs.length; o++) {
                        $("#" + divs[o]).remove();
                    }
                    divs.splice(l + 1, divs.length - (l + 1));
                    console.log(divs);
                }
            }

            $.ajax({
                type: 'GET',
                url: Routing.generate('category_subcategories', {parent_id: id}),
                dataType: "json",
                success: function(data) {
                    if (data.length != 0) {
                        // Add the new DIV with values after the latest DIV
                        $("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');

                        var LIs = "";
                        // Move for each JSON objects and build the elements
                        $.each(data, function(index, value) {
                            $.each(value, function(i, v) {
                                LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
                            })
                        });

                        // Write the HTML to the new DIV
                        $('#step' + (k + 1)).html(LIs);

                        // Push new created DIV id in the array
                        divs[k] = "cstep" + (k + 1);

                        // Increment k value for next DIV
                        k++;
                    } else {
                        $("#categories-picker").append('<button name="next_step" id="next_step"> Continuar ...</button>');
                    }
                }
            });
        });
    });

jQuery のremoveAll()バージョン

$(function() {
        var k = 1;
        // Create the array for store every created DIV in order to 
        var divs = new Array();

        // Put the first element of the array
        divs[k - 1] = "cstep" + k;

        // Each time any a.step is clicked ...
        $("#categories-picker").on("click", "a.step", function() {
            var id = $(this).attr('data-id');
            var resp = $(this).attr('data-resp');
            var count = $("#categories-picker > div").size();
            var parent_id = $(this).closest("div").attr("id");

            // Remove all elements
            $(this).closest("div").attr("id").nextAll().remove();

            $.ajax({
                type: 'GET',
                url: Routing.generate('category_subcategories', {parent_id: id}),
                dataType: "json",
                success: function(data) {
                    if (data.length != 0) {
                        // Add the new DIV with values after the latest DIV
                        $("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');

                        var LIs = "";
                        // Move for each JSON objects and build the elements
                        $.each(data, function(index, value) {
                            $.each(value, function(i, v) {
                                LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
                            })
                        });

                        // Write the HTML to the new DIV
                        $('#step' + (k + 1)).html(LIs);

                        // Push new created DIV id in the array
                        divs[k] = "cstep" + (k + 1);

                        // Increment k value for next DIV
                        k++;
                    } else {
                        $("#categories-picker").append('<button name="next_step" id="next_step"> Continuar ...</button>');
                    }
                }
            });
        });
    });

これは、2 番目のエラーによって生成されたエラーです。

TypeError: $(...).closest(...).attr(...).nextAll は関数 $(this).closest("div").attr("id").nextAll() ではありません。削除する();

私が間違っていることは何ですか?この問題を解決するための提案はありますか?

4

1 に答える 1