目錄
#如何用jquery得到每個ul下最後一個li" >#如何用jquery得到每個ul下最後一個li
jquery如何定位倒數第二個元素,如一個p裡有5個ul,那麼jquery如何才能鎖定到倒數第一個ul,第二個ul,第一個ul樣式" >jquery如何定位倒數第二個元素,如一個p裡有5個ul,那麼jquery如何才能鎖定到倒數第一個ul,第二個ul,第一個ul樣式
首頁 web前端 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");
var items=content.getElementsByTagName("ul");
var itemss=items[2].getElementsByTagName("li");//取得第二個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下最後一個li

$(function(){

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

    vary = $(this).children().last();

    ##alert (y.text());

});

#});



jquery 取得
    點選的是那個


    #      

  • 積分榜

  •      
  • 回答榜

  •   ="" >提問榜
         
  • 滿意榜

  • 點擊那個就把在那個

  • 的追加class="qhbg"樣式
  • 例如:點擊了回答榜變成

     


            
    • 積分榜

    •      
    • 回答榜

    •      
    • 提問清單

    • ##  li>滿意榜

      #$ (function(){

      $('.anserdh li a').click(function(){
              $('.anserdh li') .removeClass('qhbg');
              $(this).parent().addClass('qhbg');

         })

      })#

      jquery如何定位倒數第二個元素,如一個p裡有5個ul,那麼jquery如何才能鎖定到倒數第一個ul,第二個ul,第一個ul樣式

      $("p ul").eq(-1)
      登入後複製
      $("p ul").eq(-2)
      登入後複製

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

      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標籤來each出索引值,問題解決,可以睡覺了!

      以上是Jquery和JS取得ul中li標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

      本網站聲明
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

      熱工具

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      SublimeText3漢化版

      SublimeText3漢化版

      中文版,非常好用

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境

      Dreamweaver CS6

      Dreamweaver CS6

      視覺化網頁開發工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神級程式碼編輯軟體(SublimeText3)

      谷歌安全碼在哪裡獲取 谷歌安全碼在哪裡獲取 Mar 30, 2024 am 11:11 AM

      谷歌驗證器是一種用於保護使用者帳戶安全的工具,其金鑰是用於產生動態驗證碼的重要資訊。如果忘記了谷歌驗證器的金鑰,只能透過安全碼進行驗證,那麼下文站小編就會為大家帶來谷歌安全碼在哪裡取得的詳細內容介紹,希望能幫助到大家,想要了解的用戶們就請跟著下文繼閱讀吧!首先開啟手機設置,進入設定頁面。下拉頁面,找到Google。進入Google頁面,點選Google帳號。進入帳號頁面,點選驗證碼下方的檢視。輸入密碼或使用指紋驗證身分。取得Google安全碼,利用安全碼驗證Google身分。

      jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

      jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

      jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

      標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:&lt

      使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

      標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

      真我 12 Pro怎麼安裝雙卡? 真我 12 Pro怎麼安裝雙卡? Mar 18, 2024 pm 02:10 PM

      雖然說國產手機的大致操作是很相似的,但是在有的細節上面還是會有些區別的,比如說不同的手機型號和製造商可能會有不同的雙卡安裝方式。二真我12Pro這款新手機也是支援雙卡雙待的,但這款手機具體又該怎麼安裝雙卡呢?真我12Pro怎麼安裝雙卡?安裝之間記得先把手關機喲。步驟一查找SIM卡托盤:查找手機的SIM卡托盤,通常,在真我12Pro中,SIM卡托盤位於手機的側邊或頂部。步驟二插入第一張SIM卡,使用專用的SIM卡針或一個細小的物體,將其插入SIM卡托盤中的開槽,然後,將第一張SIM卡小心地

      假未來水晶幣怎麼獲得 假未來水晶幣怎麼獲得 Mar 22, 2024 am 08:00 AM

      很多玩家想知道假未來水晶幣怎麼獲得,其實有四種不同的方法,包括購買禮包、完成任務、生產貨物、開拓土地等,玩家可以根據自己的需求選擇不同方式賺取水晶幣,具體內容一起來看看這篇假未來水晶幣獲得方法攻略。假未來攻略大全假未來水晶幣怎麼獲得1、購買禮包商城購買水晶幣禮包。 2、完成任務完成主線、支線任務獲得。 3.生產貨物家園中生產貨物獲得水晶幣。 4.開拓土地開拓土地也能獲得,不過獎勵是一次性。

      如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

      如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬

      使用jQuery為表格新增一行的方法介紹 使用jQuery為表格新增一行的方法介紹 Feb 29, 2024 am 08:12 AM

      jQuery是一個受歡迎的JavaScript函式庫,廣泛用於網頁開發。在網頁開發過程中,經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行,並提供具體的程式碼範例。首先,我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫:

      See all articles