2011-12-18 18 views
1

これはnewbの質問ですが、そこからすべてのリソースを読み込んだ後も、この子孫の仕組みがわかりません。 art_menu divに含まれるすべてのクラスリンクdivを選択したいと思います。それ、どうやったら出来るの?.load()の後にdivの子孫要素を選択してください。

私は最初のdivを選択できます。これは、順序付けされていないリストの外にあります。私は$( '#art_menu ul li .link')を試してみました。css( '...')、動作しません、$( 'art_menu')を試しました。 ).css( '...')も動作しません。私がここで紛失していることを私に説明してもらえますか?

編集:私が以前に私に与えたすべての提案を試してみましたが、いずれも機能しませんでした。 ulは$( '#art_menu')で動的に注入されます。load()、そして.show()、これが問題になりますか?

$(document).ready(function() { 
    $('#art_menu').load('get_cat.php'); 
    $("#art_menu").fadeIn(); 
    $('#art_menu .link').css("border","3px solid red"); 
}); 
+0

を使用することができますjqueryので

$("#art_menu").find(".link"); 

.find()方法を使用することができ、私は私の答えを更新しました、あなただけです'css'をあまりにも早く呼びます。私はあなたの最初の編集からそれを推測し、コードを示す2回目の編集はそれを明確にした。 –

答えて

3

問題は、彼らがそこにいる前にリンクを操作しようとしているということです。

$(document).ready(function() { 
    $('#art_menu').load('get_cat.php'); 
    $("#art_menu").fadeIn(); 
    $('#art_menu .link').css("border","3px solid red"); 
    // ^^ too soon, the `load `isn't complete yet 
}); 

する必要があること:

$(document).ready(function() { 
    $('#art_menu').load('get_cat.php', function() { 
     // This callback happens after the load is complete 
     $("#art_menu").fadeIn(); 
     $('#art_menu .link').css("border","3px solid red"); 
    }); 
}); 

load非同期です操作は、loadへの呼び出しはそれを開始します。後で(ネットワーク速度などに依存している場合)、後で完了します。ロードが完了したときに呼び出されるコールバックがあります。ロードされたコンテンツを操作する必要があるコードが必要です。

以下の「あなたの編集」の説明も参照してください。


オリジナルの答え

あなたの例は動作するはずですが、あなたのHTMLは、2ヶ所のタイプミスがあります:あなたのli要素が閉じていない、あなたの代わりに</li>の終わりに<li>を使用しました。そうでない場合は、我々はその子孫にcssを呼び出し、任意の効果は表示されませんので、私はまた、コンテナからdisplay: noneを削除

<div id="left"> 
    <div class="link">asdfgh</div> 
    <div id="art_menu"> 
     <ul> 
      <li><div class="link">bla bla</div></li> 
      <li><div class="link">bla bla bla</div></li> 
     </ul> 
    </div> 
</div> 

注:ここでfixed exampleです!それで、あなたのexmaplesのいずれかが働くはずです(live link上記)。あなたの編集再


:私はあなたの前に私を与えたすべての提案を試みた

、それらのどれも動作しません。 ulは$('#art_menu').load()で動的に注入され、次に.show()が問題になる可能性がありますか?

おそらく、あなたのコードが実際にそこに存在する前に操作しようとしているとします。のあとにというコードしか実行されていない場合、それらは実際にそこにあります。後で注入されたという事実は無関係です。ここで

.loadlive copy)を使用して更新作業例です:

jQuery(function($) { 

    $("#theButton").click(function() { 
    // This code runs when the button is clicked 
    $("#art_menu").load("http://jsbin.com/azaxev", function() { 
     // This code runs when the load is complete 
     $("#art_menu .link").css("color", "green"); 
    }); 
    }); 

    // This code runs when there are no links, so we never 
    // see any effect form it 
    $("#art_menu .link").css("font-weight", "bold"); 

}); 

最終的な結果は、彼らがそこにいる前の行がそれら大胆な実行作るためのリンクは、大胆な緑が、ないであるということです、したがって効果はありません。

+0

多くのおかげで、これは仕事をしました。 – sostacked

0

使用セレクタ

#art_menu .link 

これは、ID art_menuといくつかの祖先を持つクラスlinkを持つすべての要素を選択します。

使用例:

$("#art_menu .link").doSomething(); 
+0

doesntの仕事 'code'の$(ドキュメント).ready(関数(){ \t \t $( '#のart_menu')負荷( 'get_cat.php');。。 \t \t $( "#のart_menu")フェードイン();\t \t $( '#art_menu .link')css( "border"、 "3px solid red"); \t}); – sostacked

+0

['load'](http://api.jquery.com/load/)は非同期で呼ばれますか?残りの関数を 'load'の完了コールバックとして渡す必要があります。 –

0

あなたはまた.children()

$("#art_menu").children(".link"); 
関連する問題