如何使用jQuery为div元素的所有子元素删除类名?

时间:2017-03-16 20:48:20

标签: jquery tree children

我搜索了一些代码,关于如何从树状菜单中删除类名,以这种方式停止树菜单类型,并且可以使用普通的div框。换句话说,我的jQuery代码自己添加一个类,我想从某个div中删除它,并从该div的所有子项(子项,孙子项,盛大的孙子项等......)中删除它。

(我从youtube上的教程中获取html,css和jQuery代码:D)

我的HTML代码是这样的:

<div class="meniuArbore">
<div><p>Bucharest</p>
    <div>Place 1
        <div class="prezentare">   // from this on (inclusive), to don't have the tree menu style
            <div class="prezentareBox1">
            </div>
            <div class="prezentareBox2">
            </div>
        </div>
    </div>
</div>

我的CSS风格如下:

.prezentare {
    width: 153mm;
    height: 40mm;
    border: 0.5mm solid #000;
}

.meniuArbore {
    padding-top: 10px;

}

.meniuArbore div {
padding-left: 20px;

}

.meniuArbore .parinte div {
display: none;
cursor: default;
}

.meniuArbore .parinte {
cursor:pointer;
background:transparent url(http://www3.telus.net/jianlu58/plus.gif) no-repeat left 1.1mm;
}

.meniuArbore .extins {
background:transparent url(http://www3.telus.net/jianlu58/minus.gif)no-repeat left 0.2mm;
}

和jQuery代码:

/* Meniu tree */
$(function() {
$('.meniuArbore div:has(div)').addClass('parinte');

// I added here the code from bellow, that I came up with ...
$('.meniuArbore div').click(function() {
var thistree = $(this);
thistree.children('div').toggle();
thistree.filter('.parinte').toggleClass('extins');
return false;
});
});

我认为它的代码应该删除类&#34; parinte&#34;在课堂上咆哮&#34; prezentare&#34;是这样的:

$('div:hasClass(prezentare)').removeClass('parent');
$('div:hasClass(prezentare)').find('*').removeClass('parent');

有些建议请!我是jQuery的新手,但我觉得我非常接近。 :d

1 个答案:

答案 0 :(得分:1)

您需要做的就是在要从子项中删除的类名之前使用选择器中的父名称:

假设您有一个ID容器的父级,其子级的类名为“classYouWantToRemove”。你会喜欢这样吗。

$(“#container .classYouWantToRemove”)。removeClass(“classYouWantToRemove”)

查看工作代码段以查看html和内联JQuery的工作情况。

#container .classYouWantToRemove {
 border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div><div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
</div>
<button id="removeAll" onclick='$("#container .classYouWantToRemove").removeClass("classYouWantToRemove")'>Remove classes</button>