jQueryで表のアイコンを変更

Question

jQueryで表のアイコンを変更したいが、要素を見つけてその背景を変更できない。私はjQueryのライブラリを使っています。

これは私のjQueryのコードです：

Factory.query().$promise.then(function(data) { 
     $rootScope.tree = data; 
     console.log($rootScope.tree); 
     buildTreeTable($rootScope.tree); 
}) 


function buildTreeTable(tree){ 
    $("#example").treetable({ 
    expandable:  true, 
    onNodeExpand: nodeExpand, 
    onNodeCollapse: nodeCollapse 
}); 

function nodeExpand() { 
    getNode(this.id); 
} 


function nodeCollapse() { 
    console.log("Collapsed: " + this.id); 
} 

$("#example tbody").on("mousedown", "tr", function() { 
             $(".selected").not(this).removeClass("selected"); 
     $(this).toggleClass("selected"); 
}); 


var len = tree.length; 
for(var i = 0; i < len; i++){ 
    if (tree[i].status == 1){ 
     var print = $('#example').attr('class').find('a').css("background-image","url(../../images/image.png)"); 
     console.log("Status is 1. Load icon for 1", print); 
     } 
} 

そして、これは私のhtmlです：

<div class="panel-body"> 
       <table id="example"> 
       <tbody> 
       <thead> 

        <tr> 
         <th >Tree data</th> 
         <th>Header1</th> 
         <th>Header2</th> 
        </tr> 
       </thead> 
       </tbody> 
       </table> 

       </div> 

私があれば意味、私は私のデータベースから取得した内容に応じ<td>のアイコンを変更したいですステータスは1、背景イメージは1つ読み込み、ステータスが2の場合は別のイメージを読み込みます。 私の<td>要素には<span>と<a>タグが含まれており、<a>タグの背景画像を変更したいと考えています。 jQueryでどうすれば実現できますか？ページがロードされた後

これは私の要素です：

これは私が取得エラーです：

TypeError: $(...).attr(...).find is not a function 

EDIT：

このコードはどのようにあります私は各trの別々のアイコンをロードしようとしています

function changeIcon(data){ 
     for(var i = 0; i < data.length; i++){ 
       if (data[i].status == 0){ 
       $('tr span.icon').each(function(){ 
       $(this).addClass('status'); 
     }) 
     console.log("Status is 0. Load icon for 0"); 
     }else if(data[i].status == 1){ 
     console.log("Status is 1. Load icon for 1"); 
     }else if(data[i].status == 2){ 
     console.log("Status is 2. Load icon for 2"); 
     }else 
     console.log("Status is 3. Load icon for 3"); 

     } 

}

事前に感謝します！

Answer 1

あなたのjQueryチェーンに不要な.attr('class')があるため、このエラーが発生しています。

.attr('name')は、指定した名前の属性の値を返します。だからあなたが書いているのは、HTML要素のclass属性の値を返します。それはjQueryチェーンを続行しません。 <table id="example">にはclassという属性がないため、返される値はundefinedになります。あなたは.find()のようなチェーン上で多くのjQueryメソッドを実行しようとしていますが、undefinedはjQueryオブジェクトではありません。

変更は、あなたの行がに：

$('#example').find('a').css("background-image","url(../../images/image.png)"); 

第二の問題は、あなたがループのためのあなたの.then()成功ハンドラ関数内であることが必要です。それ以外の場合は、AJAX呼び出しの終了後ではなく、すぐに実行されます。

Factory.query().$promise.then(function(data) { 
    $rootScope.tree = data; 
    console.log($rootScope.tree); 
    buildTreeTable($rootScope.tree); 

    // put your background image code here 
    $('#example').find('a').css("background-image","url(../../images/image.png)") 
}) 

第三に、あなたはあなたの選択は、常にテーブル全体の内側のすべての<a>タグを見つけるために起こっているので、jQueryのセレクタがどのように動作するかをよく読んでなければなりません。