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

在给定文本选择的情况下,查找某个类的前一个元素,而不考虑DOM结构

,可以使用JavaScript中的querySelectorAll方法结合CSS选择器来实现。

首先,使用querySelectorAll方法选择所有具有该类的元素,然后遍历这些元素,对于每个元素,可以使用previousElementSibling属性来获取其前一个兄弟元素。如果前一个兄弟元素也具有该类,则返回该元素,否则继续查找前一个兄弟元素,直到找到具有该类的元素或者没有更多的兄弟元素。

以下是一个示例代码:

代码语言:txt
复制
function findPreviousElementWithClass(className) {
  var elements = document.querySelectorAll('.' + className);
  for (var i = 0; i < elements.length; i++) {
    var currentElement = elements[i];
    var previousElement = currentElement.previousElementSibling;
    while (previousElement) {
      if (previousElement.classList.contains(className)) {
        return previousElement;
      }
      previousElement = previousElement.previousElementSibling;
    }
  }
  return null; // 如果没有找到具有该类的元素,则返回null
}

在上述代码中,findPreviousElementWithClass函数接受一个参数className,表示要查找的类名。它首先使用querySelectorAll方法选择所有具有该类的元素,然后遍历这些元素。对于每个元素,使用previousElementSibling属性来获取其前一个兄弟元素,并使用classList.contains方法检查该兄弟元素是否具有该类。如果具有该类,则返回该兄弟元素;否则,继续查找前一个兄弟元素,直到找到具有该类的元素或者没有更多的兄弟元素。如果没有找到具有该类的元素,则返回null。

这种方法可以在不考虑DOM结构的情况下,根据给定文本选择的情况,查找某个类的前一个元素。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(TBC):https://cloud.tencent.com/product/tbc
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQuery选择器和JQuery包装集

属性过滤器 $("div[id]")匹配包含给定属性元素 $("input[name='...']") 匹配给定属性是某个特定值元素 name='...' $("input[name!...='...']")匹配给定属性是包含某个特定值元素 name='...' $("input[name^='...']")匹配给定属性是以某些值开始元素 name^='...'...,ready是DOM结构绘制完毕后就执行,不必等到加载完毕; onload不能同时编写多个,如果有多个onload方法,只会执行一个ready可以同时编写多个,并且都可以得到执行 ; onload无简化写法...方法追加到testDiv这个被选元素结尾,这个被选元素某个控件, 如一个div块或者一个文本框,效果是在此控件后显示一个下拉框; 其他一些常用操作JQUERY包装集函数 $("p").eq(1)...(htm|element|fnl)将每一个匹配元素子内容(包括文本节点)用一个HTML结构包裹起来,举例如上,将全部字符加粗;

3.1K20
  • jquery选择器用法_jQuery属性选择

    使用公式:(“element”) 示例:(“div”) //获取所有div元素 3.选择选择器是通过元素拥有的CSS名称查找匹配...一个页面中,一个元素可以有多个CSS一个CSS又可以匹配多个元素,如果有元素中有一个匹配名称就可以被选择器选取到。...简单地说选择器就是以元素具有的CSS名称查找匹配元素。...子元素过滤器 子元素选择器就是筛选给定某个元素元素,具体过滤条件由选择种类而定 :first-child 说明:...@符号问题: jQuery升级版本过程中,jQuery1.3.1版本中彻底放弃了1.1.0版本遗留@符号,假如我们使用1.3.1以上版本,那么不需要在属性添加@符号 (“div[@name=

    12.2K30

    一个小时学会jQuery

    在网页上,组织页面(或文档)对象被组织一个树形结构中,用来表示文档中对象标准模型就称为DOM。 ? 获得DOM对象示例: <!...DOM对象; $只是jQuery别名形式; 每一个jQuery对象都是一个DOM对象集合 三、常用选择器 通过jQuery中选择器实际上取得是HTML中DOM元素。...基本选择器 基本选择器是jQuery中最常用选择器,也是最简单选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。...选择器 描述 返回 示例 #id 根据给定id匹配一个元素 单个元素 $("#test")选取id为test元素 .class 根据给定名匹配元素 集合元素 $(".test")选取所有class...hello文本节点 $("td:empty") //包含子节点或者文本空节点 $("div:has(p)") //含有选择器所匹配节点 $("td:parent") //含有子节点或者文本节点

    18.5K71

    Xpath、Jsoup、Xsoup(我Java爬虫之二)

    语法 选取结点 表达式 描述 / 从根节点选取 // 从匹配选择的当前节点选择文档中节点,考虑它们位置。 . 选取当前结点 .....//book 选取所有 book 子元素不管它们文档中位置。...el:多个选择器组合,查找匹配任一选择唯一元素,例如:div.masthead, div.logo 伪选择器selectors :lt(n): 查找哪些元素同级索引值(它位置DOM树中是相对于它父节点...:not(selector): 查找选择匹配元素,比如: div:not(.logo) 表示包含 class=logo 元素所有 div 列表 :contains(text): 查找包含给定文本元素...,搜索区分大不写,比如: p:contains(jsoup) :containsOwn(text): 查找直接包含给定文本元素 :matches(regex): 查找哪些元素文本匹配指定正则表达式

    1.7K20

    DOM扩展

    DOM两个主要扩展是Selectors API(选择符API)和HTML5。 一、选择符API Selectors API是由W3C发起制定一个标准,致力于让浏览器原生支持CSS查询。...(包含文本节点和注释)个数 5 firstElementChild 指向第一个元素,firstChild元素版 ​Item 1​ lastElementChild 指向最后一个元素...无障碍Web应用一个重要标志就是恰当焦点管理,确切地知道哪个元素获得了焦点是一个极大进步。 3....(包括元素、注释和文本节点)对应HTML标记; 写模式:根据指定值创建新DOM树,然后用这个DOM树完全替换调用元素。...document.body.contains(div); // true 掩码 节点关系 1 无关(给定节点不再当前文档中) 2 居给定节点在DOM树中位于参考节点之前) 4 居后(给定节点在

    1.5K31

    《最新出炉》系列初窥篇-Python+Playwright自动化测试-5-元素定位大法-上篇

    为了使测试具有弹性,我们建议优先考虑面向用户属性和显式协定,例如page.get_by_role()。例如:以下 DOM 结构。button通过名称为“登录”角色定位元素。...按角色定位时,通常还应传递可访问名称,以便定位器准确定位元素。例如,考虑以下 DOM 结构。 ...在这种情况下,您可以使用page.get_by_label()通过其关联标签定位控件。例如:以下 DOM 结构。...如果角色或文本值对您很重要,那么请考虑使用面向用户定位器,例如角色定位器和文本定位器。例如:以下 DOM 结构。 ...Playwright进行元素定位一些比较常用定位方法理论基础知识以及什么情况下推荐使用,当然了这不是一成不变,希望大家使用中可以灵活应用。

    3.5K31

    JavaScript 高级程序设计(第 4 版)- DOM

    是对 DOM 结构查询,因此 DOM 结构变化会自动地 NodeList 中反映出来(是实时活动对象不是首次访问快照) 可使用中括号或使用 item()方法访问 NodeList 中元素 使用...>元素,会修改元素文本 URL、 domain 和 referrer URL:包含当前页面的完整 URL domain: 包含页面的域名 可以设置,但不能给这个属性设置 URL 中包含值 当页面含有来自某个不同子域窗格...HTML文档中,标签名是区分大小写XML文档(包括XHTML)是区分大小写。...使用 MutationObserver 可以观察整个文档、 DOM一部分,或某个元素。还可以观察元素属性、子节点、文本,或者三者任意组合变化。...这两个类型—— NodeIterator 和 TreeWalker——从某个起点开始执行对 DOM 结构深度优先遍历。

    1.2K30

    jQuery基本操作

    ,文本处理) 选择器 基本  #id    #id //用于搜索,通过元素id属性中给定值 描述:(查找ID为myDiv元素) HTML代码: <div id="...:first-child //概述 匹配第<em>一个</em>子<em>元素</em> 类似的(:first)匹配第<em>一个</em><em>元素</em>,<em>而</em>次<em>选择</em>符将为 每个父<em>元素</em>匹配<em>一个</em>子<em>元素</em>· 描述 <em>在</em>每<em>一个</em>ul中<em>查找</em>第<em>一个</em>li HTML代码 <ul...:last只匹配最后<em>一个</em><em>元素</em>,<em>而</em>次<em>选择</em>符将为每<em>一个</em>父<em>元素</em>匹配到最后<em>一个</em>子<em>元素</em>· //描述 //<em>在</em>每个ul中<em>查找</em>最后<em>一个</em>li HTML代码 11111...class 用于匹配<em>的</em><em>类</em>名 实列 //描述 //给包含有<em>某个</em><em>类</em><em>的</em><em>元素</em>进行<em>一个</em>动画....· element //<em>一个</em>用于匹配<em>元素</em><em>的</em><em>DOM</em><em>元素</em> function(index) //<em>一个</em>函数用来作为测试缘故<em>的</em>集合·它结束<em>一个</em>参数index·这是缘故<em>在</em>jQuery集合<em>的</em>索引·<em>在</em>函数,this

    7.5K20

    JavaScript(十一)

    JavaScript(十一) 發佈於 2018-09-15 这一篇,我们讲讲 DOM 扩展。 对 DOM 两个主要扩展是 Selectors API(选择符 API)和 HTML5。...通过 Element 类型调用 querySelector() 方法时,只会在该元素后代元素范围内查找匹配元素。...querySelectorAll() 方法 querySelectorAll() 方法接收参数与 querySelector() 方法一样,都是一个 CSS 选择符,但返回是所有匹配元素不仅仅是一个元素...这个方法返回一个 NodeList 实例。 只要传给 querySelectorAll() 方法 CSS 选择符有效,该方法都会返回一个 NodeList 对象,不管找到多少匹配元素。...if (div.dataset.myname) { alert("Hello, " + div.dataset.myname); } 插入标记 需要给文档插入大量新 HTML 标记情况下

    82910

    【前端基础篇】JavaScript之DOM介绍

    W3C 标准给我们提供了一系列函数, 让我们可以操作: 网页内容 网页结构 网页样式 DOM一个页面的结构一个树形结构, 称为 DOM 树....查找HTML元素 下面我们将介绍几种常见DOM元素选择方法。 方法概览 方法 描述 document.getElementById(id) 通过元素 id 来查找元素。...元素节点.childNodes 返回元素一个子节点数组(包含空白文本Text节点)。 元素节点.children 返回元素一个元素集合(包含空白文本Text节点)。...元素节点.firstChild 返回元素一个子节点(包含空白文本Text节点)。 元素节点.firstElementChild 返回元素一个元素包含空白文本Text节点)。...元素节点.lastChild 返回元素最后一个子节点(包含空白文本Text节点)。 元素节点.lastElementChild 返回元素最后一个元素包含空白文本Text节点)。

    10010

    jQuery基础

    丰富DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象相邻元素,JS可能要写好几行代码,jQuery一行代码就搞定了,再比如要将一个表格隔行变色,jQuery也是一行代码搞定...如果不考虑兼容低版本浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:兼容IE678,只支持最新浏览器。需要注意是很多老jQuery插件不支持3.x版。...classdiv标签 所有元素选择器: $("*") 组合选择器: $("#id, .className, tagName") 层级选择器: x和y可以为任意选择器 $("x y");// x所有后代...开始计数 :gt(index)// 匹配所有大于给定索引值元素 :lt(index)// 匹配所有小于给定索引值元素 :not(元素选择器)// 移除所有满足not条件标签 :has(元素选择器)...c1样式div标签 $("li:not(.c1)")// 找到所有包含c1样式li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签li标签 属性选择器: [attribute

    2K120

    JavaScript(十)

    DOM 描绘了一个层次化节点树,允许开发人员添加、移除和修改页面的某一部分。 1998 年 10 月 DOM1级规范成为 W3C 推荐标准,为基本文档结构及查询提供了接口。...本篇将讨论 DOM1 特性和应用,以及 JavaScript 对 DOM1 级实现。 节点层次 ---- DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成结构。...NodeList 对象独特之处在于,它实际上是基于 DOM 结构动态执行查询结果,因此 DOM 结构变化能够自动反映在 NodeList 对象中。...参数为 true 情况下,执行深复制,也就是复制节点及其整个子节点树; 参数为 false 情况下,执行浅复制,即只复制节点本身。...通过 getAttribute() 访问时,返回 style 特性值中包含是 CSS 文本通过属性来访问它则会返回一个对象。 第二与众不同特性是 onclick 这样事件处理程序。

    69010

    Jsoup选择器语法

    siblingA + siblingB: 查找A元素之前第一个同级元素B,比如:div.head + div siblingA ~ siblingX: 查找A元素之前同级X元素,比如:h1 ~ p...el, el, el:多个选择器组合,查找匹配任一选择唯一元素,例如:div.masthead, div.logo 3、Selector伪选择器语法 :lt(n): 查找哪些元素同级索引值(它位置...(p)表示哪些div包含了p元素 :not(selector): 查找选择匹配元素,比如: div:not(.logo) 表示包含 class=logo 元素所有 div 列表 :contains...(text): 查找包含给定文本元素,搜索区分大不写,比如: p:contains(jsoup) :containsOwn(text): 查找直接包含给定文本元素 :matches(regex):...i)login) :matchesOwn(regex): 查找自身包含文本匹配指定正则表达式元素 注意:上述伪选择器索引是从0开始,也就是说第一个元素索引值为0,第二个元素index为1等

    1.7K30

    JavaScript 编程精解 中文第三版 十四、文档对象模型

    也存在children属性,它就像childNodes,但只包含元素(类型为 1)子节点,包含其他类型子节点。 当你对文本节点不感兴趣时,这可能很有用。...但是如果我们只想查找文档中特定节点,那么从document.body开始盲目沿着硬编码链接路径查找节点并非良策。如果程序通过树结构定位节点,就需要依赖于文档具体结构文档结构随后可能发生变化。...方法,用于从所有后代节点中(直接或间接子节点)搜索包含给定标签名节点,并返回一个数组对象。...我介绍选择器语法(用在样式表中,确定样式作用元素主要原因是这种微型语言同时也是一种高效 DOM 元素查找方式。...document对象和元素节点中都定义了querySelectorAll方法,该方法接受一个选择器字符串并返回数组对象,返回对象中包含所有匹配元素

    1.4K20

    Jsoup(一)Jsoup详解(官方)

    1.2、Jsoup主要功能     1)从一个URL,文件或字符串中解析HTML     2)使用DOM或CSS选择器来查找、取出数据     3)可操作HTML元素、属性、文本     注意:jsoup...1.3、jsoup 主要层次结构 ?...child: 查找某个元素下子元素,比如:可以用.body p 查找"body"元素所有 p元素       parent > child: 查找某个元素直接子元素,比如:可以用div.content..., div.logo     C:伪选择器selectors       :lt(n): 查找哪些元素同级索引值(它位置DOM树中是相对于它父节点)小于n,比如:td:lt(3) 表示小于三列元素...: 查找包含给定文本元素,搜索区分大不写,比如: p:contains(jsoup)       :containsOwn(text): 查找直接包含给定文本元素       :matches(regex

    8.6K50

    一个合格初级前端工程师需要掌握模块笔记

    ,一级子元素原则器只选择第一级子元素,不会再向下查找元素 id选择器:通过id查找页面中唯一标签 class选择器:通过特定class()来查找页面中对应标签,以 .class名称 伪选择器...::hover鼠标移入某个元素;:before某个元素前面插入内容;:after某个元素后面插入内容 群组选择器:可以对多个不同选择器设置相同样式 选择优先级 当有不同选择器对同一个对象进行样式指定时...元素高度、宽度、行高以及顶和底边距都可设置。 元素宽度设置情况下,是它本身父容器100%,除非设定一个宽度。...=value] 匹配给定属性不是某个特定值元素 [attribute^=value] 匹配给定属性是以某些值开始元素 [attribute$=value] 配给定属性是以某些值结尾元素...[attribute*=value] 匹配给定属性是以包含某些值元素 位置选择器 :first匹配第一个元素 :last获取最后一个元素 :not 去除所有与给定选择器匹配元素 :even

    3.7K10

    2019年底web前端面试题初级-web标准应付HR大多面试问题

    元素宽度设置情况,它本身父容器是100%。...false情况: 0,undefined,null,-0,NaN,""空字符串,false switch使用情况,匹配某个值相对不相等,不是匹配某个范围情况下。...,目标对象) 前部插入 节点属性,每一个元素,都可以看作是树一个分支节点,DOM结构就像树一样,从文档根document,逐步分支展开 cloneNode克隆节点。...层级选择器: 匹配所有后代元素 匹配直接子元素 匹配所有元素next元素 匹配该元素所有同辈元素 位置选择器: :first匹配第一个元素 :last获取最后一个元素 :not去除所有与给定选择器匹配元素...:even匹配所有索引值为偶数元素 :odd 匹配所有索引值为奇数元素 :eq匹配一个给定索引值元素 :gt匹配所有大于给定索引值元素 :lt匹配所有小于给定索引值元素 后代选择器,子代选择

    2.4K50

    再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    操作节点,先得选择节点,就得知道节点选择器与DOM节点查找 DOM节点选择器 W3C提供了比较方便定位节点方法和属性 getElementById() 一个参数:元素标签ID getElementsByTagName...() 一个参数:元素标签名 getElementsByName() 一个参数:name属性名 getElementsByClassName() 一个参数:包含一个或多个字符串 querySelector...() 接收CSS选择符,返回匹配到一个元素,没有则null querySelectorAll() 接收CSS选择符,返回一个数组,没有则返回[] DOM节点关系与节点查找 遍历节点树,所涉及发方法...上一个兄弟标签元素 nextSibling 下一个兄弟节点 nextElementSibling 下一个兄弟标签元素 childElementCount 第一层子元素个数(不包括文本节点和注释) ownerDocument...className className:返回节点样式,可以设置 className="demo1 class2" classList :返回所有数组 add (添加) contains (是否存在某个

    1.2K20

    前端自动化测试框架cypress

    .parents() // 用来获取DOM元素第一层元素 .parent() // 用来获取DOM元素所有同级元素 .siblings() // 用来获取指定DOM对象一个元素 .first...() // 用来获取指定DOM对象最后一个元素 .last() // 用来匹配DOM对象紧跟着一个同级元素 .next() // 用来匹配给定DOM对象所有同级元素 .nextAll...() // 用来匹配给定DOM对象之后所有同级元素直到遇到Until里定义元素为止 .nextUntil() // 用来匹配给定DOM对象紧跟着一个同级元素 .prev() // 用来匹配给定...each() // 用来元素或者数组中特定索引处获取DOM元素。...const $body = $iframe.contents().find("body"); //查找元素查找btn并单击 cy.wrap($body).find("#bin").

    2.1K40
    领券