2017-01-29 1 views
1

I have a JSFiddle herediv内のテーブルセル内の内容にアクセスする

チェックボックスがチェックされているテーブルのすべての行について、クラス '.item_description'を使ってdivのテキストコンテンツにアクセスしようとしていますが、取得できないようです。このチェックボックスは、各行。

私のHTMLは次のようになります。私のJSで

<table id="table-tasks-list" class="table-hover"> 
    <tbody> 
    <tr id="row-task-10572" class="task-modal-row"> 
     <td > 
     <div class="task_description pull-left" style="padding:5px 0 0 5px;">Qui at dolore sit alias cum voluptate ad...</div> 
     <table class="pull-right" style="border:none;"> 
      <tbody> 
      <tr> 
       <td style="width:80px;border:none;">2015-02-23</td> 
       <td class="hours" style="width:30px;border: none;">8.00</td> 
       <td class="row-icon tasks-check-box" style="border: none;"> 
       <label class="checkbox-hold"> 
        <input type="checkbox" name="bill-task" id="chk-10572" class="task-checkbox ion-fw" checked=""><span class="fake-input checkbox-icon ion-android-checkbox-outline-blank ion-fw" data-chk-id="10572"></span></label> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr id="row-task-10573" class="task-modal-row"> 
    .... 

、私が行います

$('table#table-tasks-list tbody tr td input.task-checkbox').each(function(i, check) {  
    if ($(check).is(':checked')) { 
    console.log($(check).closest('table#table-tasks-list tbody tr').find('.task_description').text()); 
}  
}); 

しかし、私は空の結果を得ます。私は何を逃したのですか?ありがとう!

答えて

3

使用

$(check).closest(".task-modal-row").find(".task_description").text(); 

最も近いコンテンツにアクセスするには.task_description

1

closest()は、テーブル全体をターゲットにし、チェックボックスに関係なく、見つかった.task-descriptionのすべての内容を出力します。あなただけ含むtrまで行く必要があります。

console.log($(check).closest('tr[id^="row-task-"]').find('.task_description').text()); 
+0

クラスセレクタよりも「id」セレクタを使用する方が、できるだけ早く、必要なリソースが少ない傾向があります。だから私は '.task-modal-row'の上で' [id^= "row-task - "] 'を選んだのです。多くの行がない場合、これはあまり重要ではありませんが、より多くの要素を取得すると、ページの動きが遅くなったり、アニメーションが停止したりする可能性があります。 –

0

なぜ動作しないのかについての回答はありません。しかし、私は同様の問題に遭遇し、コールバック関数(例ではcheck)の2番目の引数を使用する代わりに、ループ内で$(this)を使用して修正しました。これが役立つといいと思います...

関連する問題