jqueryでエレメントを選択してその幅を変更する

Question

*[@id="something"]/table/thead/tr/th[2]のテーブル内のエレメント<th>A</th>を選択して幅を変更する必要があります。

(function ITPscript() { 
 
    $(document).ready(function() { 
 
    $("#something table thead tr:nth-child(2)").width(1000); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="something" class="aaa"> 
 
    <table class="sortable"> 
 
    <thead> 
 
     <tr> 
 
     <th>0</th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
     <th>H</th> 
 
     <th>I</th> 
 
     <th>J</th> 
 
     <th>K</th> 
 
     <th>L</th> 
 
     <th>M</th> 
 
     <th>N</th> 
 
     <th>O</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="aBody"> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot></tfoot> 
 
    </table> 
 
</div>

私は$("#something table thead tr:nth-child(2)").width(140);を使用していますが、その作業はありません。要素を選択する適切な方法が必要です。

Answer 1

:nth-childは、要素のn番目の子を選択していない、それははその親のn番目の子である要素を選択します。セレクタは... tr th:nth-child(2)する必要があります：

(function ITPscript() { 
 
    $(document).ready(function() { 
 
    $("#something table thead tr th:nth-child(2)").width(1000); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="something" class="aaa"> 
 
    <table class="sortable"> 
 
    <thead> 
 
     <tr> 
 
     <th>0</th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
     <th>H</th> 
 
     <th>I</th> 
 
     <th>J</th> 
 
     <th>K</th> 
 
     <th>L</th> 
 
     <th>M</th> 
 
     <th>N</th> 
 
     <th>O</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="aBody"> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot></tfoot> 
 
    </table> 
 
</div>