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

最新推荐文章于 2021-11-29 09:10:07 发布

Java仗剑走天涯

最新推荐文章于 2021-11-29 09:10:07 发布

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： jquery last选择器 jQuery js jQuery选择器

本文链接：https://blog.csdn.net/baidu_37107022/article/details/73381872

版权

本文探讨了在jQuery中使用:first和:last选择器时遇到的异常情况。`:first`选择器能正常工作，但在使用`:last`选择器时，功能只能生效一次。通过代码示例展示了问题的具体表现，主要集中在`:last`选择器的多次触发问题上。

摘要由CSDN通过智能技术生成

:first 和 :last 分别表示：有多个标签时，选择第一个、最后一个元素

比如：

<select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
    <option>C++</option>
    <option>json</option>
    <option>java</option>
    <option>音乐</option>
    <option>体育</option>
    <option>美术</option>
</select>

$(“option:selected:first”)表示有多个选中的option，取第一个被选中的option

$(“option:selected:last”)表示有多个选中的option，取最后一个被选中的option

问题在做如下功能时，last只能作用一次，当使用first时不存在该问题

1.使用：first时，如下所示

这里写图片描述

说明：

>  表示一次选中的一个option添加到右侧
>> 表示一次将被选中的多个option添加到右侧
>>> 表示将右侧全部元素添加到右侧

代码如下：

<!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时
                $("option:selected:first").appendTo($("#rightSelectId"));

            })
            $("#left2").click(function(){
    
                $("option:selected").appendTo($("#rightSelectId"));
            })
            $("#left3").click(function(){