jq父同辈元素parents等练习

最新推荐文章于 2020-05-21 17:21:28 发布
最新推荐文章于 2020-05-21 17:21:28 发布
阅读量1k 收藏
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014185792/article/details/22274021
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>父同辈元素parents等</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {

            var a = $('em').parents().map(function() {
                return this.tagName;
            }).get().join(" ");
            $("em").append(a);
            // 用append方法，将em的所有祖先元素追加显示在字符串“My parents are:”后面。

            var b = $('td').parent().map(function () {
                return this.tagName;
            }).get();
            $("td").append(b);
            // 用append方法将td的直接父元素追加显示在“My parent is:”之后。

            $("li.item-1").closest("ul.level-2").css("color","blue");
            //用closest方法找出li.item-1的上层元素ul.level-2,并设置一种颜色

            $("li.item-a").siblings("li.item-c").css("background-color", "#419ae1");
            //用siblings方法找出li.item-a的同辈元素li.item-c，并设置一种背景色。
            $("li.item-a").css("background-color", "skyblue").css("font-weight", "bold").css("font-size", "3em");
            //将字母A设置成天蓝色加粗3em的字体；

        })
    </script>
</head>

<body>
<div><span><em>My parents are:</em></span></div>

<table border="1" cellpadding="6" width="160">
<tbody><tr><td>My parent is:</td></tr></tbody>
</table>

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" id="ii">II
     <ul class="level-2">
       <li class="item-a">A</li>
       <li class="item-b">B
         <ul class="level-3">
           <li class="item-1">1</li>
           <li class="item-2">2</li>
           <li class="item-3">3</li>
        </ul>
     </li>
     <li class="item-c">C</li>     
     </ul>
     </li>
     <li class="item-iii">III</li>
</ul>
</body>
</html>

My parents are:
My parent is:
  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
小调调hxy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在jquery中想要找到所以同辈元素方法_jQuery搜索同辈元素方法
weixin_39958911的博客
12-19 3397
本文实例讲述了jQuery搜索同辈元素方法。分享给大家供大家参考。具体分析如下：1. next()方法用于搜索紧跟在每个匹配元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进行筛选，语法格式如下：next([selector])$("p").next("p").css("color", "#FCF");2. nextAll()方法用于搜索紧跟在每个匹配元素之后的所有同辈元素，根据需要...
html中siblings方法,jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例...
weixin_42415059的博客
06-28 1429
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例本文实例讲述了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法。分享给大家供大家参考，具体如下：siblings()属于jQuery筛选类的API，用来查找某个元素的所有同辈元素(所有兄弟姐妹)。假如需要实现如下功能：点击某个按钮的时候，该按钮背景色变成#88b828，其他按钮背景色变成#15b494。...
JQ选择器
weixin_33744854的博客
11-21 162
JQ 选择器大全 2010-05-26 15:29:03| 分类： 电脑技术 | 标签： |字号大中小订阅 一、基本选择器 选择器 描 述 返回 示例 #id 根据给定id匹配一个元素 单个元素 $("#test") 选取id为test的元素 .class 根据给定类名匹配一个元素 集合元素 $(".test") 选取c...
JQ 向上查找指定 同辈元素 找到后返回
weixin_30507481的博客
08-29 493
由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是： 在同辈元素中向上找，直到找到 我指定的元素 后，返回他。 所以自己写了个方法 挺实用，特此记录一下。 2018-9-2 更新补充： 经过项目的使用，发现出现了不少问题，特此修改如下 转载于:https://www.cn...
jQuery（6）---jQurey鼠标移上移下效果 （凡客帆布鞋）
iteye_8029的博客
03-21 148
页面如下： 源码如下： demo3.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;demo3.html&lt;/title&gt; &lt;meta http-equiv="k
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
10-20
主要介绍了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法,结合简单实例形式分析了siblings()函数获取同辈元素的操作技巧,需要的朋友可以参考下
jQuery搜索同辈元素方法
12-11
本文实例讲述了jQuery搜索同辈元素方法。分享给大家供大家参考。具体分析如下： 1. next()方法 用于搜索紧跟在每个匹配元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进行筛选，语法格式如下： ...
jquery siblings获取同辈元素用法实例分析
01-19
本文实例讲述了jquery siblings获取同辈元素用法。分享给大家供大家参考，具体如下： jquery siblings 用于获得匹配集合中每个元素的同胞。 语法： .siblings(selector) 注：可以通过后面的可选参数选择器(selector)...
解析jquery获取父窗口的元素
10-27
本篇文章是对jquery获取父窗口元素的实现方法进行了详细的分析介绍，需要的朋友参考下
原生JS与JQ获取元素的区别详解
10-15
在JavaScript (JS) 和 jQuery (JQ) 中获取页面元素是两种不同的方法，它们各有特点，适应不同场景。本文将详细解析这两种方式的区别。 一、原生JavaScript获取元素 1. **通过元素ID获取**： 使用`document....
使用jquery的siblings获取某一个元素的所有同辈(兄弟姐妹)元素
aty
01-25 5237
假如需要实现如下功能：点击某个按钮的时候，该按钮背景色变成#88b828，其他按钮背景色变成#15b494。这个时候，siblings这个API很有用，也很简单。   $(function(){ $("#contentHolder input[type='but
jQuery –子级和同级选择器示例
一名可爱的技术搬运工
05-21 1204
jQuery子级和同级选择器可以分为四个选择器：后代选择器（AB），子级选择器（A> B），相邻的同级选择器（A + B）和常规的同级选择器（A〜B）。 让我们通过一个例子来了解两者之间的区别。 首先，您必须了解什么是孩子和兄弟姐妹。 让我们看这个例子， <h1>Child and Sibling Selectors example</h1> <div...
jquery选择器 之 获取父级元素、同级元素、子元素
weixin_30247307的博客
12-15 674
一、获取父级元素 1、parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> ...
JS 根据类样式的名称获取元素
热门推荐
夏沐的博客
01-13 1万+
使用函数介绍：document.getElementsByClassName("cls");获取class="cls"的元素对象 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
GridView 获得鼠标指针所在的 元素或对象
流星的专栏
02-07 630
This example shows how to determine which element in a table view is located under the mouse pointer. private void grid_MouseMove(object sender, MouseEventArgs e) { TableViewHitInfo hi =
JQuery查找子元素、父元素、同辈元素
yu491833661的博客
03-30 1429
JQUERY的父，子，兄弟节点查找方法   jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如(“span”).parent()或者(“span”).parent()或者(“span”).parent(“.class”) jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQue...
jQuery的7个同级选择器
front_end_fan
08-29 1万+
jQuery的同级选择器有七个，其中最常用的是next()和prev()，使用时要避免跟after()和before()混淆。前者是获取元素，后者是往指定位置插入值。通过下面的demo可以清楚的了解这7个同级选择器：<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery遍历之同级遍历</title> <script src
jq获取点击元素的父元素
最新发布
05-25
你可以使用 jQuery 的 `parent()` 方法来获取点击元素的父元素。具体实现可以参考以下示例代码： ```javascript $(document).on('click', '.child-element', function() { var parentElement = $(this).parent(); // 对父元素进行操作 }); ``` 在上述代码中，我们通过 `$(this)` 获取当前点击的子元素，然后使用 `parent()` 方法获取其父元素。最后，我们可以对父元素进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值