jQuery/Bootstrap 3 - クリック時に前の兄弟を見つける

Question

次の<ul>兄弟クラスに応じてスパンを前に追加しようとしています。 "崩壊"クラスまたは "崩壊"クラスです。

兄弟<ul>にクラスがある場合は、先に<a>に必要なスパンをすでに置くことができます。 ただし、をクリックして<ul>を展開するとスパンを変更する必要があります。ここではより良く理解するために

はjsfiddleです：https://jsfiddle.net/qtrhu249/2/

HTML：

<div class="treeview"> 
<ul class="level1"> 
    <li> 
    <a data-toggle="collapse" href=".options1"> 
     Item 1 
    </a> 
    <ul class="collapse options1"> 
     <li> 
     <a data-toggle="collapse" href=".sublevel1"></a> 
     <input type="checkbox" value="option1" /> 
     <a data-toggle="collapse" href=".sublevel1">Item 1-1</a> 
     <ul class="collapse sublevel1"> 
      <li> 
       Item 1-1-1 
      <ul> 
       <li><input type="checkbox" value="option1" /> 
       Item 1-1-1-1 
       </li> 
       <li><a data-toggle="collapse" href=".collapse1-1-1-1-1"></a> 
       <input type="checkbox" value="option1" /> 
       <a data-toggle="collapse" href=".collapse1-1-1-1-1">Item 1-1-1-2</a> 
       <ul class="collapse collapse1-1-1-1-1"> 
        <li>Item 1-1-1-2-1 
        <ul> 
         <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-1</li> 
         <li><a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1"></a><input type="checkbox" value="option1" /> 
         <a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1">Item 1-1-1-2-1-2</a> 
         <ul class="collapse collapse1-1-1-1-1-1-1"> 
          <li>Item 1-1-1-2-1-2-1 
          <ul> 
           <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-1</li> 
           <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-2</li> 
           <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-3</li> 
           <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-4</li> 
          </ul> 
          </li> 
         </ul> 
         </li> 
        </ul> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><input type="checkbox" value="option1" />Item 1-2</li> 
     <li><input type="checkbox" value="option1" />Item 1-3</li> 
     <li><input type="checkbox" value="option1" />Item 1-4</li> 
    </ul> 
    </li> 
</ul> 

</div> 

のjQuery：

$('.treeview ul').not('ul:not([class])').each(function() { 
    $(this).find("a").first().prepend("<span>XYZ</span>"); 
}) 

目的：クリックされたときXYZを持って 要素、ZYXへの変更そして後方へ。

Answer 1

html()でスパンのテキストを変更することができます。このお試しください：

//Function on click a elements with data-toggle 
$('a[data-toggle]').on('click',function(){ 

    //Target the span inside the clicked a 
    var sp = $('span',this) 

    //Toggle the Text 
    sp.html() == "XYZ" ? sp.html('ZYX') : sp.html('XYZ'); 
}) 

Updated Fiddle

Answer 2

を私は正確にあなたの質問を理解している場合、私は知らないが、私はあなたのJavaScriptコード内のいくつかの変更を行いました。下記をご覧ください：

$('.treeview ul').not('ul:not([class])').each(function() { 
    $(this).find("a").first().prepend("<span>XYZ</span>"); 
}); 
$('a[data-toggle]').on('click',function(){ 
    var sp = $('span', this); 
    if (!sp[0]) 
    sp = $('span', $(this).prevAll('a')); 
    sp.html() == "XYZ" ? sp.html('ZYX') : sp.html('XYZ'); 
});