jQuery +獲取元素列表的父母

Question

我有一個包含表格的網頁。在那張表中，我有一些我們在服務器上生成的單元格。出於這個原因，我有限的訪問元素。

在每一行都是一個包含div的單元格。我想獲得每個div的父單元格並向其中添加一個類。試圖做到這一點，

我有以下Fiddle。當selectAll函數被調用時，我試圖抓取所有div元素，其類別爲description。

然後，我想將selected類添加到承載description的所有td元素。我知道$('.description');給我所有的divs。我可以通過這些循環並抓住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>