javascript - 如何在不使用 DOM 的情况下更改 Class

Question

我有如下的 Div 列表。当单击每个 Div 的 Click Me 时，我想更改标题的颜色，即 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.现在，当我单击 Click Me 时，红色将应用于整个 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');
  });
});