Question

我试图删除除了在此HTML中使用jQuery单击的div之外的所有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内的任何a#data-id=1少说div#cstep1，那么div#cstep2和div#cstep3应被删除，如果我点击a#data-id=3，然后删除下一个div#cstep3。现在，如果我点击任何元素，divs应该使用来自$.ajax调用的新元素重新绘制。我编写了这段代码，但它没有工作，因为它删除了所有DIV，但后来我再也无法创建了，当我点击div#cstep1上的任何元素时就会发生这种情况。此外，我尝试了两种方法：一种基于数组，另一种基于jQuery函数生成错误。我在这里开机：

数据版

    $(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>');
                    }
                }
            });
        });
    });

这是第二个产生的错误：

TypeError：$（...）。nearest（...）。attr（...）。nextAll不是函数 $（本）.closest（＆＃34; DIV＆＃34）ATTR（＆＃34; ID＆＃34）。nextAll（）除去（）;

我做错了什么？有什么建议可以解决这个问题吗？

Answer 1

正如我的评论中所提到的，当它只是一个字符串值时，你使用attr（）的返回值作为对象。

我使用它来代替http://jsfiddle.net/tBCVX/：

$(this).closest("div[id]").nextAll().remove();

div[id]只匹配任何具有id的div（无论id值如何）。

我没有你的路由组件，因此它会在那时消失，但点击时项目会消失。

请对JSFiddle版本进行任何更正，以便其他人可以使用实际代码。

删除除点击以外的其他人不起作用

1 个答案: