jQuery - 入力要素にCSSスタイルを適用する

Question

すべてのリンクを確認して、壊れたリンクフィールドの背景色を変更しようとしています。 CSSが適用されていないいくつかの理由

<table id="new_post_links_table"> 
... 
<td><input type="text" name="mp3_link[]"/></td> 
<td><input type="text" name="mp4_link[]"/></td> 
</tr> 
</tbody> 
</table> 

： はここ

function CheckLinks(){ 
$('#new_post_links_table tbody>tr').find("input").each(function() { 
    UrlExists($(this).val(), function(status){ 
    if(status === 404){ 
     $(this).css('background-color','#FC0'); 
    } 
}); });} 

入力フィールドは次のようになります私の関数です。

注：CheckLinks機能は、$(this).css...部分を除いて機能します。 （FireBug'ed）

注：行が動的に

EDITを追加されています。

function UrlExists(url, cb){ 
    jQuery.ajax({ 
     url:  url, 
     dataType: 'text', 
     type:  'GET', 
     complete: function(xhr){ 
      if(typeof cb === 'function') 
       cb.apply(this, [xhr.status]); 
     } 
    }); 
} 

Answer 1

カップルの事間違っ：ここでは関数です。 $(this).valへの呼び出しに()を含めなかったため、コールバック内のthis参照は意図した要素を参照していません。

function CheckLinks(){ 
    $('#new_post_links_table tbody > tr') 
    .find("input") 
    .each(function(index, element) { 
     UrlExists($(this).val(), function(status){ 
     if(status === 404) $(element).css('background-color','#FC0'); 
     }); 
    }); 
} 

この場合、Access-Control-Allow-Originとの間違いがあります。

UrlExists機能を変更して、サーバー上のプロキシスクリプトを実行することができます。 、あなたのバックエンドで

$.getJSON('checklink.php', { location: url }, function (data) { 
    callback.apply(null, data.status); 
}); 

URLをテストし、JSONを経由して応答を送信：あなたは、次のような何かを行うことができ

$response = array( 
    'location' => $location, 
    'status' => $status 
); 
echo json_encode($response); 

この方法は、あなたのJavaScriptは、あなたのバックエンドと通信し、持っています原点制御に問題はありません。

Answer 2

これは入力を参照していないというのが私の気持ちです。クロージャー内でアクセスできるように入力を格納する変数を追加する必要があります

var input = $(this); 
UrlExists($(this).val(), function(status){ 
    if(status === 404){ 
    input.css('background-color','#FC0'); 
    } 
}); 

Answer 3

動的に追加された行があることがわかっていますか？以前は似たような問題がありました。問題は、jQueryがいくつかのコンテンツを持つ新しい行が追加されたことを知らなかったことです。関数の$（this）の下にあるものをコンソールで試してみて、あなたが得た結果を教えてください。