javascript - jQueryを使用して1つの兄弟要素のすべての親にクラスを追加する方法

Question

私はこのマークアップを持っています:

<li class="parent">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

ここで、クリックされたボタンに応じて、各親にクラスを与える必要があります。

だから私はこれを行います：

var main_ctnr = $('.main_cntnr'),
    main_prnt = main_ctnr.find('li.parent');

$('span.button').on('click', function(){
   main_prnt.prevAll().addClass('some_class);
}

そして、持つ必要性を解決します:

最初のボタンをクリックした後

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

2番目のボタンをクリックした後

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

そして3番目

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent some_class">
         <span class="button"></span>
      </li>
   <li>
<li>

メインの親の前の部分がまだクラスを受け取っていないように、最初の親の中でのみ動作する必要があります。いいえ、クリックした後、この状況になる可能性がありますthis_button:

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>    
<li class="parent some_class">
   <span class="this_button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

これは厳しいので、山から - 助けてくれてありがとう。