jQuery +获取元素列表的父母

Question

我有一个包含表格的网页。在该表中，我有在服务器上生成的单元格行。出于这个原因，我对这些元素的访问权限有限。

每行都是一个包含div的单元格。我想获取每个div的父单元格并为其添加一个类。为了做到这一点，

我有以下Fiddle。调用selectAll函数后，我尝试使用类div获取所有description元素。

然后，我想将selected类添加到托管td的所有description元素中。

我知道$('.description');给了我所有的div。我可以遍历这些并抓住parent。但是，我想知道是否有更好的方法与选择器这样做。如果是这样，怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

.description {
  background-color:#eee;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想要

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

更新了小提琴：http://jsfiddle.net/humotrj0/49/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;