Javascript jQuery：如何选择同一类的确切元素？

我不确定我的问题是否表述得很好，希望细节能涵盖这些问题

所以，我正在构建一个人工的全高幻灯片式子菜单，我在那里有一个空容器：

<section class="masking_sublevel">

</section> 

所以，我要做的是选择上面提到的ul，并将其放在悬停事件的空部分，然后在鼠标上清空它，如下所示：

$(document).ready(function(){

    var dropdownLi = $('li.dropdown');
    var maskingSubLvl = $('.masking_sublevel');
    var importedUl = $('.masking_sublevel ul');

    var hiddenUl = $('.hidden_ul ul');


    $(dropdownLi).on('mouseover',function(){

        $(hiddenUl).appendTo(maskingSubLvl);
        $(maskingSubLvl).css('display','block');

    });

    $(dropdownLi).on('mouseleave',function(){
        $(maskingSubLvl).css('display','none');
        $(importedUl).empty();

    $(maskingSubLvl).on('mouseenter',function(){
            $(this).css('display', 'block');

    });

  });

});

问题是，对于这段代码，我可能只选择了类为.hidden_ul'的第一个ul，因为当我随机悬停在其他项目上时，它会继续加载第一个列表的内容。如何选择与当前悬停的类相同的ul元素

---

谢谢

因此您希望从具有mouseover的元素遍历到父ul，它是父ul.hidden_l的子元素

---

因此，您希望从具有mouseover的元素遍历到父ul，它是父ul.hidden_l的子元素

由于您的隐藏内容是.下拉列表的直接子项，您需要使用其父上下文获取它，如下所示：

$(dropdownLi).on('mouseover',function(){
    var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
    $(hiddenUl).appendTo(maskingSubLvl);
    $(maskingSubLvl).css('display','block');
});

更新

与其追加，不如尝试不断更改.maskingSubLvl的html，以便在追加另一个内容之前无需再次删除该内容。例如：

由于您的隐藏内容是.下拉列表的直接子项，您需要使用其父上下文获取它，如下所示：

$(dropdownLi).on('mouseover',function(){
    var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
    $(hiddenUl).appendTo(maskingSubLvl);
    $(maskingSubLvl).css('display','block');
});

更新

与其追加，不如尝试不断更改.maskingSubLvl的html，以便在追加另一个内容之前无需再次删除该内容。例如：

---

你就不能给他们身份证然后用它来代替吗？像hidden1etc一样，然后得到如下元素：var hiddenUl=$'hidden1'；你的HTML的结构是什么。。每个“li.dropdown”是否都有自己的隐藏和屏蔽子级？？尝试添加一个JSFIDLE示例如果向我们展示完整的html，这可以很容易地完成。我找不到你的类。下拉列表？使用$this访问你悬停的元素，然后从那里开始。@GuruprasadRao，我已经更新了HTML部分，谢谢！你就不能给他们身份证然后用它来代替吗？像hidden1etc一样，然后得到如下元素：var hiddenUl=$'hidden1'；你的HTML的结构是什么。。每个“li.dropdown”是否都有自己的隐藏和屏蔽子级？？尝试添加一个JSFIDLE示例如果向我们展示完整的html，这可以很容易地完成。我找不到你的类。下拉列表？使用$this访问你悬停的元素，然后从那里开始。@GuruprasadRao，我已经更新了HTML部分，谢谢！

$(dropdownLi).on('mouseover',function(){
    var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
    $(hiddenUl).appendTo(maskingSubLvl);
    $(maskingSubLvl).css('display','block');
});

$(document).ready(function(){
    var dropdownLi = $('li.dropdown');
    var maskingSubLvl = $('.masking_sublevel');
    var importedUl = $('.masking_sublevel ul');

    $(dropdownLi).on('mouseover',function(){
        $(maskingSubLvl).css('display','block');
        var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
        $(maskingSubLvl).html(hiddenUl);
    });

    $(dropdownLi).on('mouseleave',function(){
        $(maskingSubLvl).css('display','none');
    });

    $(maskingSubLvl).on('mouseenter',function(){
            $(this).css('display', 'block');
    });
});