jQuery +要素のリストの親を取得

Question

私はテーブルを含むWebページを持っています。そのテーブルには、私たちがサーバーで生成したセルの行があります。そのため、私は要素へのアクセスが制限されています。

各行には、divを含むセルがあります。私は各divの親のセルを取得し、クラスを追加したい。これを試みるには、

私は次のものを持っています：FiddleselectAll関数が呼び出されると、descriptionクラスのdiv要素をすべて取得しようとしています。

descriptionをホストするtd要素のすべてにselectedクラスを追加したいとします。

私は$('.description');を知っています。私はこれらをループしてparentをつかむことができました。しかし、セレクタでこれを行うより良い方法があるのだろうかと思っていました。もしそうなら、どうですか？

function selectAll() { 
 
    var divs = $('.description'); 
 
}

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 

 
.description { 
 
    background-color:#eee; 
 
} 
 

 
.selected { 
 
    padding:2rem; 
 
    background-color:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th>  
 
     <th>Count</th>   
 
     <th>Description</th>  
 
     </tr> 
 
    </thead> 
 
    
 
    <tbody> 
 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td> 
 
      <div class="description"> 
 
      Simple description 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     
 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td> 
 
      <div class="description"> 
 
      Simple description 
 
      </div> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td style="padding:0;"> 
 
      <div class="description"> 
 
      Some more text. 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    
 
    <button class="btn btn-primary" onclick="selectAll();"> 
 
    Select All 
 
    </button> 
 
</div>

Answer 1

あなたが欲しい

$('.description').closest('td').addClass('selected') 

更新フィドル：http://jsfiddle.net/humotrj0/49/

---

function selectAll() { 
 
    $('.description').closest('td').addClass('selected'); 
 
}

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
.description { 
 
    background-color: #eee; 
 
} 
 
.selected { 
 
    padding: 2rem; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Count</th> 
 
     <th>Description</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td> 
 
      <div class="description"> 
 
      Simple description 
 
      </div> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td> 
 
      <div class="description"> 
 
      Simple description 
 
      </div> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Item 1</td> 
 
     <td>3</td> 
 
     <td style="padding:0;"> 
 
      <div class="description"> 
 
      Some more text. 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <button class="btn btn-primary" onclick="selectAll();"> 
 
    Select All 
 
    </button> 
 
</div>