クラスを追加したり削除したりする際に奇妙な問題が発生しました

Question

ウィジェットの初期化に使用されている以下の関数があります。

jQuery.fn.initPortlet = function(parent_component ,header , component){ 
     var o = $(this[0]) 
     this.addClass("ui-widget ui-widget-content ui-corner-all") 
      .find(header)   
      .addClass("headertitle") 
      .addClass("align_center") 
      .addClass("defaultheadercolor") 
      .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
      .end() 
      .find(component); 
}; 

ウィジェットの左上隅にマイナスアイコンが追加されます。 この関数は複数回呼び出され、マイナスアイコンを複数回追加するため、いくつかのAjax呼び出しがあります。

このような方法でこの関数を書き直して、何回呼び出されるようにするには、ヘッダにマイナスアイコンを1つだけ追加してください。
私はfallowingアプローチを試みたが、うまくいかなかった。私はトリング午前何

var $minusthick = $('span.ui-icon ui-icon-minusthick'); 
$('div.div_header').find($minusthick).remove().prepend('<span class="ui-icon ui-icon-minusthick"></span>').end(); 

は、クラス名span.ui-アイコンUI-アイコンminusthickですべてのスパンを削除し、最終的にマイナスのアイコンを追加しているが、それは私のために働いていません。二コール・HTMLのため

<div class="div_portlet" id="LINEITEM_HEADER" > 
<div class="div_header"><%=hu.getFrameURL(82,83)%> Line Item Header Information</div> 
      <div class="div_content" id="LINEITEM_HEADER_CONTENT"> 

      </div> 
</div> 

ます：私はこの中で、この関数を呼び出しています

編集 は、これに対応する

$('.div_portlet').initPortlet('.div_portlet','.div_header','.div_content') 
      $('.div_portlet_inner').initPortlet('.div_portlet_inner','.div_header_inner','.div_content_inner'); 

HTMLは

HTMLをIS-way-同じクラスのままであれば、他のクラスについても同様に、〜div_portlet_inne rである。 私はこの機能をjsファイルに書いています。

私は私の目標を達成することができますので、非常に感謝されるように助けや提案。 私はこの時点で立ち往生してくれた人を助けてください。 事前に感謝!!!!!

Answer 1

oがどの変数に使用されているのかわかりませんが、私の変更の一般的な点は、クラスが既に適用されているかどうかをjQuery hasClass()関数で確認することです。

jQuery.fn.initPortlet = function(parent_component ,header , component){ 
    var o = $(this[0]) 

    if (!this.hasClass('ui-widget')) 
    { 
     this.addClass("ui-widget ui-widget-content ui-corner-all") 
     .find(header)   
     .addClass("headertitle") 
     .addClass("align_center") 
     .addClass("defaultheadercolor") 
     .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
     .end() 
     .find(component); 
    } 
}; 

Answer 2

ʞɔɐɯɹoↃɔWのsǝɯɐsは、この問題に良い解決策を与えたが、ここであなたの試みがうまくいかなかった理由の説明です：

セレクタ'span.ui-icon ui-icon-minusthick'の最初の部分は、クラスui-iconとspanを探しています、 2番目の部分は明らかに存在しないタイプ<ui-icon-minusthick>の要素を探します。 、複数のクラス名を持つ要素を選択するには、ちょうどあなたがCSSでするように同じセレクタにそれらすべてを追加します。find($minusthick)は何もしませんので、もちろん

$('span.ui-icon.ui-icon-minusthick') 

を、あなたのコードの残りの部分は無操作できなくなり、したがって、残りのjQueryチェーンには、動作するコンテキストがありません。これは、（私が思う）あなたが期待どおりに動作します：

$('div.div_header').find('span.ui-icon.ui-icon-minusthick').remove().end().prepend('<span class="ui-icon ui-icon-minusthick"></span>'); 

余分end()コールは、この場合div.div_headerには、第1のセレクタにjQueryオブジェクトを返し、最終end()のための必要はありません。