javascript - 如何根据类名过滤子元素

Question

我有一个包含一些产品图像的图像 slider :每个产品 con 都有不同的图片，可以通过无序列表元素的类(示例中的 DeepFaceMashie、McDowall、Niblick)来识别。

<div class="cd-slider-wrapper">
    <ul class="cd-slider">                          
        <li class="selected DeepFaceMashie"><img src="img/deepface.jpeg"></li>
        <li class="DeepFaceMashie"><img src="img/deepface2.jpeg"></li>
        <li class="DeepFaceMashie"><img src="img/deepface3.jpeg"></li>
        <li class="McDowall"><img src="img/mcdowall.jpeg"></li>
        <li class="McDowall"><img src="img/mcdowall2.jpeg"></li>
        <li class="McDowall"><img src="img/mcdowall3.jpeg"></li>
        <li class="Niblick"><img src="img/niblick.jpeg"></li>
        <li class="Niblick"><img src="img/niblick2.jpeg"></li>
    </ul>                       
</div>

通过javascript我可以获取无序列表的所有元素

sliderContainer = navigation.parents('.cd-slider-wrapper').find('.cd-slider')

此时，如何创建仅包含一个产品图像的 sliderContainer 副本？我只能提取子元素，但我需要维护 sliderContainer 结构，仅包含其中选定的元素。

Answer 1

如果我的理解是正确的，您想要该 slider 的副本，其中包含您通过类名选择的特定类型的产品!？如果是这样，您可以克隆此 slider 并将其副本插入到它旁边或您选择的特定元素。接下来您要做的就是删除不必要的元素:

$( ".cd-slider" ).clone().appendTo(".cd-slider-wrapper").contents().not('.McDowall').remove();

working example for slider clone with specific content