Javascript 使用“将AJAX结果定位到正确的DIV中”；rel"；属性

我有以下HTML代码：

<div class="ct-slide" style="left: 55px;">
    <div class="ct-menu-text shadow" style="display: block;">
        <ul>
                <li rel="electronica" data-id="1" title="Electrónica">Electrónica <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="hogar" data-id="3" title="Hogar">Hogar <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="ropa-zapatos-y-accesorios" data-id="4" title="Ropa, Zapatos y Accesorios">Ropa, Zapatos y Accesorios <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="joyas-y-relojes" data-id="5" title="Joyas y Relojes">Joyas y Relojes <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="salud-y-cuidado-personal" data-id="6" title="Salud y Cuidado Personal">Salud y Cuidado Personal <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="deportes-y-actividades-outdoors" data-id="7" title="Deportes y Actividades Outdoors">Deportes y Actividades Outdoors <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
                <li rel="libros" data-id="8" title="Libros">Libros <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
        </ul>
    </div>
        <div rel="electronica" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="hogar" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="ropa-zapatos-y-accesorios" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="joyas-y-relojes" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="salud-y-cuidado-personal" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="deportes-y-actividades-outdoors" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div rel="libros" class="ct-submenu shadow" style="width: 1665px; display: none;">
            ...
        </div>
        <div title="Click para abrir" class="ct-open" style="display: none;"></div>
    <div style="" title="Click para cerrar" class="ct-close"></div>
</div>

---

将单击的

LI

的

rel

保存在变量中。然后在选择器中使用该变量查找匹配的

DIV

当您尝试

$（“.ct子菜单”）.attr（“rel”）.eq（0）

时，这不起作用，因为

.attr（“rel”）

不是选择器，而是返回

rel

属性内容的方法

var k = 1;
$(".ct-menu, .ct-menu-text").on("mouseenter", "li", function() {
    var id = $(this).attr('data-id');
    var rel = $(this).attr('rel');
    var next = $(this).closest("div[id]").nextAll().length;

    $("#selected_category").attr("value", id);

    if (next > 0) {
        k = k - next;
        $(this).closest("div[id]").nextAll().remove();
    }

    $.ajax({
        type: 'GET',
        url: Routing.generate('category_subcategories', {parent_id: id}),
        dataType: "json",
        success: function(data) {
            if (data.length != 0) {
                $(".ct-submenu[rel="+rel+"]").append('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
                var LIs = "";
                $.each(data, function(index, value) {
                    $.each(value, function(i, v) {
                        LIs += '<li><a class="step ct-sub-menu-text" data-id="' + i + '" href="#">' + v + '</a></li>';
                    })
                });
                $('#step' + (k + 1)).html(LIs);
                k++;
            }
        }
    });
});

回调中的选择器是：

$("#"+rel)

---

将单击的

LI

的

rel

保存在变量中。然后在选择器中使用该变量查找匹配的

DIV

当您尝试

$（“.ct子菜单”）.attr（“rel”）.eq（0）

时，这不起作用，因为

.attr（“rel”）

不是选择器，而是返回

rel

属性内容的方法

var k = 1;
$(".ct-menu, .ct-menu-text").on("mouseenter", "li", function() {
    var id = $(this).attr('data-id');
    var rel = $(this).attr('rel');
    var next = $(this).closest("div[id]").nextAll().length;

    $("#selected_category").attr("value", id);

    if (next > 0) {
        k = k - next;
        $(this).closest("div[id]").nextAll().remove();
    }

    $.ajax({
        type: 'GET',
        url: Routing.generate('category_subcategories', {parent_id: id}),
        dataType: "json",
        success: function(data) {
            if (data.length != 0) {
                $(".ct-submenu[rel="+rel+"]").append('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
                var LIs = "";
                $.each(data, function(index, value) {
                    $.each(value, function(i, v) {
                        LIs += '<li><a class="step ct-sub-menu-text" data-id="' + i + '" href="#">' + v + '</a></li>';
                    })
                });
                $('#step' + (k + 1)).html(LIs);
                k++;
            }
        }
    });
});

回调中的选择器是：

$("#"+rel)

---

rel

属性描述关系的性质，它不可用于基本数据。使用

data-*

进行此操作。

rel

属性描述关系的性质，它不可用于基本数据。使用

data-*

。好吧，我按照你的建议做了，它可以工作，只是我不知道为什么当我将鼠标移动到新创建的LI中时，相同的功能没有被触发，你能看看并尝试找出为什么它不能工作吗？我一次又一次地看到新的LIs被放入

#步骤

，但没有看到绑定。我甚至没有在HTML中看到它。好吧，我按照你的建议做了，它工作了，只是我不知道为什么当我将鼠标移动到新创建的LI中时，相同的功能没有被触发，你能看一看并试着找出为什么它不工作吗？我一次又一次地看到新的LIs被放入

#步骤

，但没有看到绑定。我甚至没有在HTML中看到它。