首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取刚才单击的元素的同级div并将其插入div jquery返回[object Object]

获取刚才单击的元素的同级div并将其插入div可以通过以下方式实现:

代码语言:javascript
复制
// 给目标元素绑定点击事件
$('#targetElement').click(function() {
  // 获取目标元素的同级div
  var siblingDiv = $(this).siblings('div');
  
  // 将同级div插入目标元素的后面
  $(this).after(siblingDiv);
});

解释:

  1. 首先,通过$('#targetElement')选择器选中目标元素,可以根据实际情况修改选择器的内容。
  2. 使用.click()方法给目标元素绑定点击事件。
  3. 在点击事件的回调函数中,使用$(this)获取当前被点击的元素。
  4. 使用.siblings('div')方法获取目标元素的同级div元素,该方法会返回一个包含所有同级div元素的jQuery对象。
  5. 最后,使用.after()方法将同级div插入目标元素的后面。

请注意,以上代码使用了jQuery库来操作DOM元素。如果你还没有引入jQuery库,请先引入再使用以上代码。另外,如果你需要获取更多关于jQuery的信息,可以参考腾讯云的腾讯云jQuery产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

继续死磕前端

id是box元素元素 $('#box').parent(); //选择id是box元素所有子元素 $('#box').children(); //选择id是box元素同级元素 $(...//方式2 获取元素索引值可以使用 index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上动画,动画执行完后会执行一个函数。...jquery 中则是使用 html() 方法获取和设置 html 内容: // 获取内容 var $htm = $('#div1').html(); // 设置 html 内容 $('#div1')....,它指的是改变html标签结构,它有两种情况: 1、移动现有标签位置 2、将新创建标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空div var...$div2 = $('这是一个div元素'); 移动或者插入标签方法 1、 append() 和 appendTo():在现存元素内部,从后面放入元素 var $span =

2.8K10

21.jQuery

返回最先匹配元素 nextAll 查找当前元素之后所有的同辈元素 nextUntil 查找当前元素之后所有的同辈元素,直到遇到匹配那个元素为止 offsetParent 返回第一个匹配元素用于定位父节点...可以用可选表达式进行筛选 eq 获取当前链式操作中第N个jQuery对象,返回jQuery对象 first 获取第一个元素 last 获取最后个元素 filter...筛选出与指定表达式匹配元素集合 is 根据选择器、DOM元素jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定表达式就返回true map...) ​​第一行​​​, ​下面另起一行​​] before(在每个匹配元素之前插入内容) <div class=...,对可见元素有效,Object {top: 117, left: 250} $(window).scrollTop() //获取滚轮滑高度 $(window).scrollLeft() /

3K90
  • jQuery 入门指南教程

    对于获取元素集合,获取其中某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回jQuery对象,而get(n)和索引返回是dom元素对象。...对于jQuery对象只能使用jQuery方法,而dom对象只能使用dom方法,如要获取第三个元素内容。...// value 值 $('input').val(); // 返回表单输入框value值 $('input').val('test'); // 将表单输入框value值设为test // 单击事件...$('#msg').click(); // 触发 id 为 msg 元素单击事件 $('#msg').click(fn); // 为 id 为 msg 元素单击事件添加函数 如果选中多个元素,...最近那个 form 父元素 $('div').children(); // 选择 div 所有子元素 $('div').siblings(); // 选择 div 同级元素 对 css 操作 $

    1.2K11

    前端之jquery函数库

    id是box元素元素 $('#box').children(); //选择id是box元素所有子元素 $('#box').siblings(); //选择id是box元素同级元素 $('#...这是一个div jquery样式操作 jquery用法思想二   同一个函数完成取值和赋值 操作行间样式 // 获取div样式 $("div").css("width...("div").css({fontSize:"30px",color:"red"}); 特别注意   选择器获取多个元素获取信息获取是第一个,比如:$("div").css("width"),获取是第一个...html标签结构,它有两种情况: 1、移动现有标签位置 2、将新创建标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空div var $div2 =...$('这是一个div元素'); 移动或者插入标签方法 1、append()和appendTo():在现存元素内部,从后面放入元素 var $span = $('这是一个

    5.2K20

    jquery 使用方法

    form父元素 4 $('div').children(); //选择div所有子元素 5 $('div').siblings(); //选择div同级元素 三、链式操作 选中网页元素以后...它原理在于每一步jQuery操作,返回都是一个jQuery对象,所以不同操作可以连在一起。...但是实际上,它们有一个重大差别,那就是返回元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。...使用这种模式操作方法,一共有四对 1 .insertAfter()和.after():在现存元素外部,从后面插入元素 2 .insertBefore()和.before():在现存元素外部,从前面插入元素...3 .appendTo()和.append():在现存元素内部,从后面插入元素 4 .prependTo()和.prepend() 5 :在现存元素内部,从前面插入元素 六、元素操作

    1.6K10

    浅谈JavaScript

    事件属性设置了也个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它速度比原生window.onload更快。...); }) jQuery选择器 1、jQuery选择器介绍 jquery选择器就是快速选择标签元素获取标签,选择规则和css样式一样 2、jQuery选择器种类 标签选择器 类选择器 id选择器...id是box元素上一个同级元素 $('#box').prevAll(); //表示选择id是box元素上面所有同级元素 $('#box').next(); //表示选择id是box元素下一个同级元素...id是box元素class等于myClass元素 获取和设置元素内容 1、html方法使用 jqueryhtml方法可以获取和设置标签html内容 示例代码: $...value属性和设置value属性还可以通过val方法来完成 2、小结 获取和设置元素属性操作可以通过prop方法来完成 获取和设置元素value属性可以通过val方法来完成,更加方便 jQuery

    3.2K30

    一文深入JQuery

    (object, [callback]) for..of: jquery 3.0 版本之后提供方式 事件绑定 jquery标准绑定方式 on绑定事件/off解除绑定 事件切换:toggle 案例...广告显示和隐藏 抽奖 插件:增强JQuery功能 实现方式: 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数: speed:动画速度...:就是元素在集合中索引 element:就是集合中每一个元素对象 this:集合中每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]) for…of: jquery 3.0 版本之后提供方式...功能 实现方式: $.fn.extend(object) 增强通过Jquery获取对象功能 $(“#id”) $.extend(object) 增强JQeury对象自身功能 $/jQuery

    3.3K30

    JQuery高级

    jQuery中定义变量时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery语法。 其实$是jQuery一个函数。...比如子级有单击事件,那么父级如果有单击事件也会被触发,父级父级如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应事件。...之前click是只能给已有的元素绑定命令,事件委托则是既给已有的绑定命令,又可以给未来元素绑定命令。...on第二种用法:只给未来元素绑定命令意思是没有提高代码效率,而是起到了给现在已有和未来元素绑定命令。 <!...(目的地) prepend()向前面加 prependTo(目的地) 父级加: after()在同级后面加 insertAfter(目的地)在同级后面加 before()在同级别的前面加 insertBefore

    1.5K50

    jQuery设计思想

    .children(); //选择div所有子元素   $('div').siblings(); //选择div同级元素 三、链式操作 jQuery设计思想之三,就是最终选中网页元素以后,可以对它进行一系列操作...它原理在于每一步jQuery操作,返回都是一个jQuery对象,所以不同操作可以连在一起。...但是实际上,它们有一个重大差别,那就是返回元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。...使用这种模式操作方法,一共有四对: .insertAfter()和.after():在现存元素外部,从后面插入元素 .insertBefore()和.before():在现存元素外部,从前面插入元素....appendTo()和.append():在现存元素内部,从后面插入元素 .prependTo()和.prepend():在现存元素内部,从前面插入元素 六、元素操作:复制、删除和创建

    2.2K60

    jQuery DOM操作

    一、创建元素 只需要把DOM字符串传入$方法即可返回一个jQuery对象 var obj = $('Done')...DOM对象、HTML string、 jQuery对象 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中元素位置与原来...target之后(同样不是尾部,是同级) 注意我们只能把对象插入目标对象后面作为同级对象,不能插入字符串 ?...) 这是一个读写两用方法,用于获取/修改元素innerHTML **当没有传递参数时候,返回元素innerHTML 当传递了一个string参数时候,修改元素innerHTML为参数值**...看个例子 $('div').html() $('div').html('123') 如果结果是多个进行赋值操作时候会给每个结果都赋值 如果结果多个,获取时候,返回结果集中第一个对象相应值 ?

    98630

    elasticSearch学习(九)

    bulk.hasFailures(); //返回结果是是否出现错误,插入成功则返回false,所以在此要取反 } } 实体类 package com.cxy.es.entity; import...Document document = Jsoup.parse(new URL(url), 30000); //第二个参数为最大连接时间,超时即报错 //通过document对象获取页面上一部分元素...获取到所有的li元素,商品信息部分是用ul来装载,所以要先获取到所有的li元素 Elements elements = element.getElementsByTag("li");...接口分页带条件查询信息 数据有了之后,就是做数据展示,在此接口接收查询关键字和分页信息进行分页带条件查询: Controller接口代码 //分页查询数据接口 @GetMapping(...,实现单击搜索按钮就发送请求进行ES库查询,并且使用v-for将查询结果进行遍历显示。

    1.1K10

    JQuery高级应用

    jq遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中索引 element:就是集合中每一个元素对象...this:集合中每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]),object为需要遍历jq对象,回调方法中参数与...当单击jq对象对应组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。... 插件 增强JQuery功能 如何定义插件:(看下面两个案例) $.fn.extend(object) 增强通过Jquery获取对象功能 $("#id") ?

    5.9K30

    一个小时学会jQuery

    在其核心,jQuery重点放在从HTML页面里获取元素对其进行操作。如果你熟悉CSS,就会很清楚选择器威力,通过元素特性或元素在文档中位置去描述元素组。...例如,为了获取嵌套在元素一组超链接,我们使用如下语句: $("p a") $( )函数返回特别的JavaScript对象,它包含着与选择器相匹配DOM元素数组。...将每一个选择器匹配到元素合并后一起返回 集合元素 $("div,span,p.cls")选取所有,和拥有class为cls标签一组元素 * 匹配所有元素 集合元素 $(...语法:$(".className") 本例通过类名来获取元素,因为使用同一个类样式元素可能有多个,所以通过类名来获取元素返回将是一个数组对象,即jQuery包装集,然后对此包装集中元素进行相关操作...hello"); //每个p节点同级之后插入内容 $("p").before("hello"); //在每个p节点同级之前插入内容 $("p").insertAfter("#

    18.5K71

    jQuery学习笔记

    jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素对选取元素进行操作 基础语法: 所有jQuery语句用“$”符号开始 <!...100% 完成之后执行 jQuery DOM 获取/设置内容 text() 设置/返回所选元素文本内容[原型:innerhtml] html() 设置/返回所选元素内容(含HTML标签) val(...) 设置/樊湖表单字段value 获取/设置属性 attr() 设置/返回所选元素属性内容(支持多个属性设置,返回数组) 添加元素 append() 尾部插入元素 prepend() 开头插入元素...,指定标签、类名、id、name等) 水平遍历DOM树 siblings() 返回被选元素所有同级元素(支持过滤参数) next() 返回被选元素下一个同级元素 nextAll() 返回被选元素之后所有同级元素...nextUntil() 返回被选元素与参数之间所有同级元素 prev() 返回被选元素上一个同级元素 prevAll() 返回被选元素之前所有同级元素 prevUntil

    7.4K30

    【前端基础】javascript笔记

    基础一 概念 1.1 jQuery 是一个javascript类库,通过jquery可以选取HTML元素对它们执行操作。...HTML #获取DOM内容 text() 设置或返回元素文本内容 html() 设置或返回元素HTML内容 val() 设置或返回表单字段值 attr() 获取属性..."); #添加元素 append() 在被选元素结尾插入内容 prepend() 在被选元素开头插入内容 after() 在被选元素之后插入内容 before() 在被选元素之前插入内容...);四 jQuery 遍历 遍历就是根源其相对于其他元素关系来获取HTML元素 # jQuery 祖先 parent() 返回元素直接父元素 parents()...返回所有父元素 parentsUntil("div") 返回直到div元素 # jQuery 后代 children() 返回所有直接子元素 find

    13810

    【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

    一、事件概述 事件基本概念 上一章我们讲解了使用jQuery选择器获取元素通过一些方法来操作元素,本章我们讲解事件概念,通过事件我们可以加强用户与浏览器交互性,例如可以实现当用户点击某个元素时候...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素时候,就会执行花括号中代码。...,索引就是当前元素在其同级元素中排第几个,从0开始计数。...我们将index获取索引值赋值给变量i,输出i就看到了这个元素索引。...鼠标移动获取坐标 鼠标在元素上移动时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div时候,获取鼠标在网页页面上坐标,代码如下所示: 1 <!

    1.6K10
    领券