2017-03-16 8 views
0

ツリーメニューからクラス名を削除する方法について、いくつかのコードを検索して、そのツリーメニュータイプを停止し、通常のdivボックスを使用できるようにしました。言い換えれば、私のjQueryコードは、それ自身でクラスを追加して、特定のdiv、およびそのdivのすべての子(子、孫、壮大な孫など)から削除する必要があります。div要素のすべての子に対してjQueryでクラス名を削除するにはどうすればよいですか?

(私はユーチューブのチュートリアルから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; 
}); 
}); 

そして、私はそれがクラス「prezentare」怒鳴るクラス「parinte」を削除すべきだと思うのコードはこれです:

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

いくつかアドバイスしてください!私はjQueryを初めて使っていますが、私は非常に近いと感じています。 :Dあなたがする必要がある

答えて

1

すべては、あなたが子供から削除するクラス名の前にセレクタに親の名前を使用している:

は、あなたがクラス名を持っている子供を持つIDのコンテナを持つ親を持っているとしましょう「classYouWantToRemove」のあなたはこれが好きでしょう。

$( "#コンテナ.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>

+0

ありがとう! :) あなたは私の問題を解決していませんでしたが、私は簡単なアイデアをくれました::) 私はセレクタタグで直接代わりに 'div:hasClass(presentation)'コードのようなクラス名を入れました。これは: '$( '。meniuArbore .presentation')。removeClass( 'parent'); $( '。meniuArbore .presentation div:has(div)')removeClass( 'parent'); ' そして今、それは私の望むように機能します! :) –

関連する問題