jquery如何实现点击LI标签和下面的LI互换顺序

jquery如何实现点击LI标签和下面的LI互换顺序,第1张

1、首先打开huilder软件,新建一个html文件,写入html的结构,先设置一个外层的div并设置class属性,div中在设置一个span标签显示标题,和一个无序列表:

2、然后在上面的style标签中设置样式,外层的box设置宽度,间距和边框,标题设置颜色和字体倾斜,内容设置宽度、边框和盒子内外边距,并且把字体调即可:

3、最后在html下方引入jquery的库文件,在script标签中写js代码,这里先用$选择器获取dom元素后添加一个click事件,在点击之后如果存在下移个元素,就用after函数把当前元素插入到下一个元素后面,就实现li标签的互换 *** 作:

4、最后打开浏览器,可以看到设置好的无序列表,点击里面的第二个元素:

5、此时就会发现蓝框中li标签互换了顺序:

$("c1")find("li")each(function(){      //这里会遍历class为c1下的每一个li元素

    $(this)find("p")each(function(){     //这里会遍历该li元素下的每个p元素

        var pId = $(this)attr("id");      //这里就是该p元素的id

        alert(pId);

    });

});

<script>

$(function(){

var str = $("li a")text();

});

</script>

上面程序里的 str 就等于li里面a的值 也就是“一级菜单

jquery里面的text()可以获取标签的值,同样也可以改变标签的值

比如:<li id="a_1">一级菜单</li>

$("#a_1")text("二级菜单");

这个时候li标签里面的值就变为“二级菜单”了

js 获取元素下面所有的li

1、var content=documentgetElementById("content");

2、var items=contentgetElementsByTagName("ul");

3、var itemss=items[2]getElementsByTagName("li");//获取第二个li标签

一、如何用jquery获得每个ul下最后一个li

1、$(function(){

2、$(function(){

3、$("ul")each(function(){

4、  var y = $(this)children()last();

5、 alert(ytext());

6、 });

7、});

二、jquery 获取<ul> 点击的是那个<li>

1、<ul class="anserdh" id="topmenu">

2、<li class="qhbg"><a href="" >积分榜</a></li>

3、<li><a href="">回答榜 </a></li>

4、<li><a href="" >提问榜</a></li

5、<li><a href="" >满意榜</a></li>

6、</ul>

比较简单, 用live:

$("#showtitle")live("click",function () {

                    var id = $("#showtitle>ul>li")attr("value");

                    alert(id);

 });

以上就是关于jquery如何实现点击LI标签和下面的LI互换顺序全部的内容,包括:jquery如何实现点击LI标签和下面的LI互换顺序、jquery获取li下级ID、Jquery 怎样获得当前点击的li 元素中超链接的值 比如:<li><a href="#">一级菜单</a></li>等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9497216.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存