關於 jQuery 的 next()

嗯, 前天在用 jQuery 的 next() 來抓取 HTML element, 網頁範例如下, 就是說~ 會有很多個 li, 然後每個 li 之後都會跟著一個 div 。我想要做的事情是, 當網頁載入時, 所有 class 為 foo_text 的 div 都會先隱藏的, 當按下某個 li 後, 接在這個 li 之後的 div 才會顯示出來。

來解釋一下好了, 就當作是 li 是標題, 接在後面的 div 則是他的內文, 一開始只有標題, 當按了某個標題之後, 這個標題的內文才會顯示出來。而每個標題跟內文都是由別的程式所產生的, 所以沒有辦法加上特別的 id 或是 class, 所以只能將標題跟內文分別給不同的 class 來做判別, 所以只好用 next 來抓取物件, 當時第一次用 next, 不過看著 visual jquery, 一下子就寫好了如下的程式碼。

Javascript:

$(document).ready(function(){
    $('.foo_text').hide();
    $('.foo_title').click(function(){
        $('.foo_text').hide('normal');
        $(this).next().slideDown('slow');
    })
});

HTML:

<ul>  
    <li class='foo_title' href='#'><a href='#'>Randylien</a></li>
    <div class='foo_text'>what list ?上次不是說要寫JQUERY文章?</div>
    <li class='foo_title'><a href='#'>tzangms</a></li>
    <div class='foo_text'>對阿...可是...我剛才重新去查一下...我的 XHTML 不是 valid ... 所以不能怪 ie , 我下禮拜在試看看...Orz</div>
</ul>```

用 firefox 在看得時候, 沒問題, 本來想說用 jQuery 寫應該不會有 cross browser 的問題, 沒想到一開 ie 來看, 怎麼點都沒反應!!! :o

後來在測試的結果, 是 ie 抓錯物件, 當我用下列程式碼來秀出瀏覽器抓到的值的時候, 我預期的應該是要秀出內文, 沒想到在 ie 居然列出了標題加內文 :o

$(document).ready(function(){ $('.footext').hide(); $('.footitle').click(function(){ $('.foo_text').hide('normal'); msg = $(this).next().text(); alert(msg); }) });

ie 整個抓錯了阿!! 後來我索性又寫了 ie 另外處理的方式, ie 居然要這樣才能抓到我想要的結果:

$(document).ready(function(){ $('.footext').hide(); $('.footitle a').click(function(){ $('.foo_text').hide('normal'); $(this).next().slideDown('slow'); }); });

變動的只有第三行, 原本的 .foo_title 變成 .foo_title a, 這樣 ie 就可以正確抓到我想到的結果, 但是… firefox 不行…. 最後我只好用 $.browser 來判斷, 分別執行兩段程式 Orz

其實當時是有想說 div 到底能不成直接寫在 li 之後, 可能是因為 HTML 不 valid 的原因導致在 ie 上物件抓錯?  
 昨天晚上 Randy 大大就又在 twitter 說到:

> 「上次不是說要寫JQUERY文章?」

那時候剛好查完這樣的HTML寫法不是 valid 的, 程式碼不在身邊, 又懶得在家裡寫程式, 所以回說:

> 「對阿…可是…我剛才重新去查一下…我的 XHTML 不是 valid … 所以不能怪 ie , 我下禮拜在試看看…Orz」

不過後來想說 Randy 大大都說話了, 我就開了 textmate 重新寫一遍 valid 的 HTML 跟新的 javascript 來測試, javascript 跟 html 都改成下面這樣, 就 ie 跟 firefox 都沒問題了!

Javascript:

$(document).ready(function(){ $('.footext').hide(); $('.footitle').click(function(){ $('.foo_text').hide('normal'); $(this).next().next().slideDown('slow'); }); });

HTML:


  • Randylien
    what list ?上次不是說要寫JQUERY文章?
  • tzangms
    對阿...可是...我剛才重新去查一下...我的 XHTML 不是 valid ... 所以不能怪 ie , 我下禮拜在試看看...Orz
```

果然 HTML 不要亂寫阿, 不然 javascript 位置會跑錯! XD 然後在跟 Randy 大大討論的過程中, Randy 大大也丟給了我這麼一段, ie 跟 firefox 都可以跑的程式碼:

$(document).ready(function(){
    $('.faq_text').hide();
    $('.faq_title').click(function(){
        $('.faq_text').hide('normal');
        $(this).next().slideDown('slow');
    });
});```

HTML:


  • Randylien
  • what list ?上次不是說要寫JQUERY文章?
  • tzangms
  • 對阿...可是...我剛才重新去查一下...我的 XHTML 不是 valid ... 所以不能怪 ie , 我下禮拜在試看看...Orz
```

喔喔喔!! 不愧是藍迪大大阿!!

結論就是… javascript 寫完, 記得 firefox 跟 ie 都開來看一下阿!

tzangms

Read more posts by this author.

Subscribe to Oceanic / 海海人生

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!