javascript - DOMを使用せずにクラスを変更する方法

Question

以下のDivのリストがあります。各DivのClickMeがクリックされたときに、Heading、つまりHeading1、Heading2、Heading3の色を変更したい。以下と同じJQueryを作成しました。

    <pre>
     <div>
       <div>
          <span class="Heading">Heading1</span>
          <div>Content1</div>
          <a class="ClickMe">Click Me</a>
        </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading2 </span>
            <div>Content2</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
           <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>    

  <script>
    $('document').ready(function(){
         $(".ClickMe").click(function(){
       $(this).parent().children(0).toggleClass('red');
     });
    });
  <script>


<style>
  .red
  {
    color : red;
  }
</style>

1.これで、[クリックしてください]をクリックすると、Div全体に赤い色が適用されます。

2.DOMを使用する以外に、見出しだけに赤い色を適用する方法はありますか？

Answer 1

$(document).ready(function(){
    $(".ClickMe").click(function(){
        $(this).siblings('.Heading').toggleClass('red');
    });
});

http://api.jquery.com/siblings/

Answer 2

$(this).closest('.Heading').toggleClass('red');

Answer 3

$('document').ready(function(){
  $(".ClickMe").click(function(){
    $(this).closest('.Heading').toggleClass('red');
  });
});