目次
例えば、p に 5 つの ul がある場合、jquery は最後から 2 番目の ul、2 番目の ul、最初の ul スタイルをどのようにロックできるか" >例えば、p に 5 つの ul がある場合、jquery は最後から 2 番目の ul、2 番目の ul、最初の ul スタイルをどのようにロックできるか
ホームページ ウェブフロントエンド htmlチュートリアル JqueryとJSはulでliタグを取得します

JqueryとJSはulでliタグを取得します

Jun 27, 2017 pm 01:25 PM
javascript jquery 得る

js 要素の下のすべての li を取得します

var content=document.getElementById("content"); items=content.
getElementsByTagName("ul"); itemss=items[2].getElementsByTagName("li");//2 番目の li タグを取得します
または

var p=document.getElementById('a');

var ul=p.childNodes.item(0);

var lis=ul.childNodes
for(var) i=0;ialert("Item "+i+": "+lis.item(i).innerHTML)
}


jquery でそれぞれを取得する方法ul

$(function() の最後の li ){$(function(){

$("ul").each(function(){

    var y = $(this).children().last();

    alert(y.text());

});

});

$("ul").each(関数(){

var y = $( this).children().last();

alert(y.text());

});

});

jquery Get
    クリックされたもの





そのリストをクリックすると、class="qhbg" スタイルがその
  • に追加されます

    例: をクリックした後回答リストでは、

      ;


  • 回答一覧
  • href="" >質問一覧

  • ');

  • 例えば、p に 5 つの ul がある場合、jquery は最後から 2 番目の ul、2 番目の ul、最初の ul スタイルをどのようにロックできるか

    $("p ul").eq(-1)
    ログイン後にコピー
    $("p ul").eq(-2)
    ログイン後にコピー

    $(&#39;ul li<a href="http://www.php.cn/wiki/972.html" target="_blank">:first-child</a>&#39;).css(&#39;backgroundColor&#39;, &#39;#000&#39;);

    jqueryの要素を走査する.each()について


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>tab选项卡</title>
        <style type="text/css">
            ul,li{list-style: none;margin: 0px; padding: 0px;}
            li{float: left;width: 80px; height: 30px; background-color: #ccc; border: 2px solid #fff;text-align:center; line-height:30px;}
            #content{clear:left; width:336px; height: 180px; background-color: #999; color:white;}
            #content p{display: none}
            #content .consh{display: block;}
            #title .titsh{background-color: #999;border:2px solid #999; color:#fff}
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $("li").each(function(index){
                    $(this).mouseover(function(){
                        $("#title .titsh").removeClass("titsh");
                        $("#content .consh").removeClass("consh");
                        $(this).addClass("titsh");
                        $("#content>p:eq("+index+")").addClass("consh");
                    })
                })                
            })
        </script>
    </head>
    <body>
        <p id="tab">
            <p id="title">
                <ul>
                    <li class="titsh">选项一</li>
                    <li>选项二</li>
                    <li>选项三</li>
                    <li>选项四</li>
                </ul>
            </p>
            <p id="content">
                <p class="consh">内容一</p>
                <p>内容二</p>
                <p>内容三</p>
                <p>内容四</p>
        </p>
    </p>
    </body>
    </html>
    ログイン後にコピー

    JqueryとJSはulでliタグを取得します

    後で実際のページで使ってみたところ、上記のliリストが変更されると判明しました。 、以下の p ブロックは、異なるブロックでは変化しません。CSS スタイルが実際のページ内の他のスタイルと競合していると考えられます。すべての CSS セレクター を独自のものに変更した後、これがまだ問題であることがわかりました。判断はここにあるはずです:

    $("#title .titsh").removeClass("titsh");
    $("#content .consh").removeClass("consh");
    $(this).addClass("titsh");
    $("#content>p:eq("+index+")").addClass("consh");
    
    第一句,第二句取出样式的时候,没有问题,第三局给当前的li标签加上titsh的css样式也正常,就是最后一句 给通过p:eq(index)获取到的p区块加样式的时候失败。
    
    于是我在
    ログイン後にコピー
    $("li").each(function(index){
    $(this).mouseover(function(){
    这两句之间加了一个alert(index)弹窗,看看效果,发现有10几个li标签的索引值被alert出来,一想原来实际这个页面中还有其他的li标签,所以导致each()迭代出来的索引值和下面p区块的索引值对应不上,这样上面li标签变动的时候,下面的p区块就不跟着变了,于是我将js代码改了一下:
    ログイン後にコピー


    JqueryとJSはulでliタグを取得します

      <script type="text/javascript">
        $(function(){
              $("#title ul li").each(function(index){
                $(this).click(function(){
                  $("#title .titsh").removeClass("titsh");
                  $("#content .consh").removeClass("consh");
                  $(this).addClass("titsh");
                  $("#content > p:eq("+index+")").addClass("consh");
                })
              })                
            })
      </script>
    ログイン後にコピー

    JqueryとJSはulでliタグを取得します

    .each() で反復される li 要素のセレクターに制限を追加して、li 要素を見つけることができるようにします。タブにタグを付けてインデックス値を取得します。問題は解決したので、スリープ状態に入ることができます。

    以上がJqueryとJSはulでliタグを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    Googleセキュリティコードはどこで入手できますか Googleセキュリティコードはどこで入手できますか Mar 30, 2024 am 11:11 AM

    Google Authenticator はユーザー アカウントのセキュリティを保護するために使用されるツールであり、そのキーは動的検証コードを生成するために使用される重要な情報です。 Google Authenticator のキーを忘れて、セキュリティ コードでしか認証できない場合は、この Web サイトの編集者が Google セキュリティ コードの入手先について詳しく説明しますので、お役に立てれば幸いです。詳細を知る ユーザーは以下を読み続けてください。まず電話の設定を開き、設定ページに入ります。ページを下にスクロールして Google を見つけます。 Googleページに移動し、「Googleアカウント」をクリックします。アカウント ページに入り、確認コードの下にある [表示] をクリックします。パスワードを入力するか、指紋を使用して身元を確認します。 Google セキュリティ コードを取得し、そのセキュリティ コードを使用して Google の ID を確認します。

    jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

    jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

    Realme 12 ProにデュアルSIMをインストールするにはどうすればよいですか? Realme 12 ProにデュアルSIMをインストールするにはどうすればよいですか? Mar 18, 2024 pm 02:10 PM

    国内の携帯電話の一般的な操作は非常に似ていますが、携帯電話のモデルやメーカーが異なると、デュアル SIM のインストール方法が異なる場合があるなど、細部ではまだいくつかの違いがあります。新しい携帯電話 Erzhenwo 12Pro もデュアル SIM デュアル スタンバイをサポートしていますが、この携帯電話にデュアル SIM をインストールするにはどうすればよいですか? Realme 12ProにデュアルSIMをインストールするにはどうすればよいですか?インストールする前に必ず携帯電話の電源を切ってください。ステップ 1: SIM カード トレイを見つける: 電話機の SIM カード トレイを見つける. 通常、Realme 12 Pro では、SIM カード トレイは電話機の側面または上部にあります。ステップ 2: 最初の SIM カードを挿入します. 専用の SIM カード ピンまたは小さな物体を使用して、SIM カード トレイのスロットに挿入し、最初の SIM カードを慎重に挿入します。

    jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

    タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

    jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

    タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

    Taqu で無料のチャット時間を取得する方法 Taqu で無料のチャット時間を取得する方法 Taqu で無料のチャット時間を取得する方法 Taqu で無料のチャット時間を取得する方法 Mar 12, 2024 pm 03:58 PM

    Taqu で無料のチャット時間を取得するにはどうすればよいですか? Taqu は非常に使いやすいチャットおよびデート ソフトウェアで、数え切れないほどの独身の友人が理想のパートナーを見つけるのに役立ちました。このソフトウェアでは、多くのネチズンと簡単にチャットし、自分の魂に最も合うネチズンを見つけることができます。しかし、最近、一部のユーザーは、ソフトウェアを使用しているときに無料チャットが使い果たされてしまうことに気づきました。それで、それを解決するにはどうすればよいでしょうか?編集者が無料でチャット時間を取得する方法を紹介しましたので、興味のある友人はぜひご覧ください。 Taqu との無料チャット時間を取得する方法: まず、携帯電話で Taqu を開きます。次に、個人のホームページでアバターをクリックします。次に、下の「友達を作る」をクリックします。最後に、他の人とチャットする友達を作る方法を選択できます。 . それぞれが

    モバイルゲーム「シューティングコンドル」で黄栄を入手する方法 モバイルゲーム「シューティングコンドル」で黄栄を入手する方法 Mar 27, 2024 pm 10:36 PM

    コンドル モバイル ゲームが間もなく正式にリリースされます。多くのプレイヤーが黄栄の入手方法を知りたがっています。プレイヤーはまず [NetEase Master] APP をダウンロードし、[コンドル サークル] に参加してコンドル ミニゲーム: SSR 黄栄に参加する必要がありますロンは無料で差し上げます。コンドルモバイルゲームで黄栄を入手する方法 1. まず、[NetEase Master] APPをダウンロードし、[Condor Circle]に参加します。 2. コンドルシューティングサークルに移動し、ページを上にスライドして以下のページを表示し、[宝物を彫る]をクリックします。 3. 下の図の矢印で示されているように、[釣宝ミニゲーム: SSR 黄蓉を無料でプレイする] をクリックすることもできます。 4. Diaobao ページに入り、下部の [Yunyou Zhongdu] をクリックします。これはアイドル状態のデバイスです。時間と方向を選択するだけです。 5. 毎回異なる時間と方向を選択して、少なくとも 6 回旅行します。 6. クリックして請求

    偽の未来クリスタ​​ルコインを入手する方法 偽の未来クリスタ​​ルコインを入手する方法 Mar 22, 2024 am 08:00 AM

    多くのプレイヤーは偽の未来のクリスタル コインを入手する方法を知りたいと思っていますが、実際にはギフト パッケージの購入、タスクの完了、商品の生産、土地の開発など、4 つの異なる方法があり、プレイヤーは自分のニーズに応じてクリスタル コインを獲得するためのさまざまな方法を選択できます。具体的な内容は次のとおりです。 立ち上がって、偽の未来のクリスタルコインを入手する方法に関するこのガイドを見てください。偽りの未来ガイド: 偽りの未来クリスタ​​ルコインの入手方法 1. ギフトパッケージモールを購入してクリスタルコインギフトパッケージを購入します。 2. タスクを完了し、メインタスクとサイドタスクを完了することで入手できます。 3. 商品を生産する 自宅で商品を生産してクリスタルコインを入手します。 4. 開発土地は土地を開発することでも入手できますが、報酬は 1 回限りです。

    See all articles