スパンクラス "markup_zzz"がスパンクラス "markup_zz"の直後に追加された場合

Question

スパンクラスをターゲットにする方法がわかりません。例えば

：

<span class="markup_z">Item one</span> 
<span class="markup_zz">Item two</span> 
<span class="markup_xx">Item three</span> 
<span class="markup_zzz">Item four</span> 

markup_zzは、上記の例では、項目番号3をmarkup_zzするために、「開く」クラスを追加markup_zzzが続いている場合、私はのような何かをしたいと思います。

親としてmarkup_zz、子としてmarkup_zzzを考えてみましょう。親に親クラスを追加する子がある場合。

これは私がこれまで持っているものです。

$(document).ready(function() { 
$(".markup_z:not(:last-child):has(+ .markup_zz)") 
.addClass("open"); 
}); 

しかし、唯一のは、最初のレベルのために働くこと。

スパンを変更することはできませんので、別の方法で行う必要があります。

Answer 1

あなたが求めているものを達成するための直接機能/セレクタはないと思います。 クラスが要件に一致する場合は、特定のアイテムの横にある各アイテムを検索する必要があります。

.nextAll()と.hasClass()はおそらくあなたが探しているものです。

ここに少しスニペットがあります。スパンをクリックすると、各要素の検索が有効になります。

$(document).on('click', '.clickable', function() { 
 
     
 
     // get the classes of the span 
 
     var $classes = $(this).attr('class').split(' '); 
 
     var found = false; 
 
     
 
     // foreach class 
 
     for (var i = 0; i < $classes.length && ! found; ++i) { 
 
      var current_class = $classes[i]; 
 
      if (current_class !== 'clickable') { // (avoid checking 'clickable') 
 
       
 
       // add the last letter of the class 
 
       var target_class = current_class + current_class[current_class.length - 1]; 
 
       
 
       // get sibling elements after the clicked one 
 
       var $elems = $(this).nextAll(); 
 
       
 
       // search foreach elem after the clicked one if any of the 
 
       // classes of that element are the target_class 
 
       for (var j = 0; j < $elems.length && ! found; ++j) { 
 
        var elem = $elems[j]; 
 
        if ($(elem).hasClass(target_class)) 
 
         found = true; 
 
       } 
 
      } 
 
     } 
 
     
 
     // if the clicked element matches our requirements 
 
     if (found) { 
 
      /* 
 
      * ... do something 
 
      * 
 
      */ 
 
      $(this).css('background-color', 'green'); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style='margin-bottom:50px;'> 
 
    <span class="clickable markup_a">one</span> 
 
    <span class="clickable markup_aa">two</span> 
 
    <span class="clickable markup_bb">three</span> 
 
    <span class="clickable markup_aaa">four</span> 
 
</div>

------------------ ----------------- EDIT -

Execute a function when the document is ready

あなたは自動的に関数を実行する方法を知ったら、要素や配列を反復する.each()を使用しています。

このjsFiddleをご覧ください。