當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQuery中 :first 和 :last 选择器诡异问题

發(fā)布時(shí)間：2025/3/20 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery中 :first 和 :last 选择器诡异问题小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

:first 和 :last 分別表示：有多個(gè)標(biāo)簽時(shí)，選擇第一個(gè)、最后一個(gè)元素

比如：

$(“option:selected:first”)表示有多個(gè)選中的option，取第一個(gè)被選中的option

$(“option:selected:last”)表示有多個(gè)選中的option，取最后一個(gè)被選中的option

問題在做如下功能時(shí)，last只能作用一次，當(dāng)使用first時(shí)不存在該問題

1.使用：first時(shí)，如下所示

說明：

> 表示一次選中的一個(gè)option添加到右側(cè) >> 表示一次將被選中的多個(gè)option添加到右側(cè) >>> 表示將右側(cè)全部元素添加到右側(cè)

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){$("#left1").click(function(){//此處使用first時(shí)$("option:selected:first").appendTo($("#rightSelectId"));})$("#left2").click(function(){$("option:selected").appendTo($("#rightSelectId"));})$("#left3").click(function(){$("#leftSelectId>option").appendTo($("#rightSelectId"));})$("#right1").click(function(){$("option:selected:first").appendTo($("#leftSelectId"));})$("#right2").click(function(){$("option:selected").appendTo($("#leftSelectId"));})$("#right3").click(function(){$("#rightSelectId>option").appendTo($("#leftSelectId"));})});</script><style type="text/css">.textClass {background-color: #ff0000;}</style> </head> <body><table><tr><td><select id="leftSelectId" style="width:100px" multiple="multiple" size="6"><option>C++</option><option>json</option><option>java</option><option>音樂</option><option>體育</option><option>美術(shù)</option></select></td><td><input id="left1" type="button" value=">" style="width:50px"/> <br/><input id="left2" type="button" value=">>" style="width:50px"/> <br/><input id="left3" type="button" value=">>>" style="width:50px"/> <br/><input id="right1" type="button" value="<" style="width:50px"/> <br/><input id="right2" type="button" value="<<" style="width:50px"/> <br/><input id="right3" type="button" value="<<<" style="width:50px"/> <br/></td><td><select id="rightSelectId" style="width:100px" multiple="multiple" size="6"></select></td></tr></table></body> </html>

2.使用：last時(shí)，如下圖所示

只能點(diǎn)擊一次后就不能生效了。

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){$("#left1").click(function(){//此處改用last后，就只能生效一次了 $("option:selected:last").appendTo($("#rightSelectId"));})$("#left2").click(function(){$("option:selected").appendTo($("#rightSelectId"));})$("#left3").click(function(){$("#leftSelectId>option").appendTo($("#rightSelectId"));})$("#right1").click(function(){$("option:selected:last").appendTo($("#leftSelectId"));})$("#right2").click(function(){$("option:selected").appendTo($("#leftSelectId"));})$("#right3").click(function(){$("#rightSelectId>option").appendTo($("#leftSelectId"));})});</script><style type="text/css">.textClass {background-color: #ff0000;}</style> </head> <body><table><tr><td><select id="leftSelectId" style="width:100px" multiple="multiple" size="6"><option>C++</option><option>json</option><option>java</option><option>音樂</option><option>體育</option><option>美術(shù)</option></select></td><td><input id="left1" type="button" value=">" style="width:50px"/> <br/><input id="left2" type="button" value=">>" style="width:50px"/> <br/><input id="left3" type="button" value=">>>" style="width:50px"/> <br/><input id="right1" type="button" value="<" style="width:50px"/> <br/><input id="right2" type="button" value="<<" style="width:50px"/> <br/><input id="right3" type="button" value="<<<" style="width:50px"/> <br/></td><td><select id="rightSelectId" style="width:100px" multiple="multiple" size="6"></select></td></tr></table></body> </html> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的jQuery中 :first 和 :last 选择器诡异问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： jsp中c:forEach的应用
下一篇：算法--微软面试：指定数字在数组中出现的