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

当一个列表包含一个' button‘元素时,我怎么能只找到list的值,而不是button

当一个列表包含一个' button'元素时,如果你只想获取列表的值而不包括按钮的值,你可以使用以下方法:

  1. 使用JavaScript的querySelectorAll()方法来选择列表中的所有元素,然后使用Array.from()方法将其转换为数组。然后,你可以使用Array.prototype.filter()方法来过滤掉按钮元素,只保留列表元素。
代码语言:txt
复制
const listItems = Array.from(document.querySelectorAll('ul li'));
const listValues = listItems.filter(item => !item.classList.contains('button')).map(item => item.textContent);
console.log(listValues);

在上面的代码中,我们首先使用querySelectorAll()方法选择所有ul元素下的li元素,并使用Array.from()方法将其转换为数组。然后,我们使用Array.prototype.filter()方法过滤掉包含'button'类的元素,只保留列表元素。最后,我们使用Array.prototype.map()方法将列表元素的文本内容提取出来,并将结果存储在listValues数组中。

  1. 如果你使用的是jQuery库,你可以使用其提供的选择器和过滤器来实现相同的效果。
代码语言:txt
复制
const listValues = $('ul li:not(.button)').map(function() {
  return $(this).text();
}).get();
console.log(listValues);

在上面的代码中,我们使用jQuery选择器选择所有ul元素下的li元素,并使用:not(.button)过滤器排除包含'button'类的元素。然后,我们使用map()方法将列表元素的文本内容提取出来,并使用get()方法将结果转换为数组。

无论你选择使用原生JavaScript还是jQuery,上述代码都可以帮助你获取列表的值而不包括按钮的值。

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

相关·内容

react组件深度解读

在创建 React 组件时应该牢记这一点。我们不是在写 HTML,而实在使用 JS 扩展来创建 React 元素(实际上是 JS 对象)的函数调用。...第一个参数是 props 的对象就像可以为 HTML 元素传递 id 或 title 等属性一样,React 元素在渲染时也可以接收属性列表。...使用函数组件时,你不必将包含属性列表的对象命名为 props,但这是标准做法。但当我们使用类组件时,属性列表始终命名为 props。请注意,props 是可选的。有些组件可以没有 props。...注意我这里使用的是 箭头函数 而不是常规函数。这只是我个人的一种风格偏好。有些人喜欢常规函数,这没有任何问题。我认为重要的是要与你选择的风格保持一致。4....组件与元素你可能会在 React 指南和教程中找到 component 和 element 这两个词。我认为 React 学习者需要理解重要的区别。

5.6K20

react组件用法深度分析

在创建 React 组件时应该牢记这一点。我们不是在写 HTML,而实在使用 JS 扩展来创建 React 元素(实际上是 JS 对象)的函数调用。...第一个参数是 props 的对象就像可以为 HTML 元素传递 id 或 title 等属性一样,React 元素在渲染时也可以接收属性列表。...使用函数组件时,你不必将包含属性列表的对象命名为 props,但这是标准做法。但当我们使用类组件时,属性列表始终命名为 props。请注意,props 是可选的。有些组件可以没有 props。...注意我这里使用的是 箭头函数 而不是常规函数。这只是我个人的一种风格偏好。有些人喜欢常规函数,这没有任何问题。我认为重要的是要与你选择的风格保持一致。4....组件与元素你可能会在 React 指南和教程中找到 component 和 element 这两个词。我认为 React 学习者需要理解重要的区别。

5.5K20
  • 1.1、文本插值

    而当其为其他假值时 attribute 将被忽略。...期望的绑定值类型:any 详细信息 v-show 通过设置内联样式的 display CSS 属性来工作,当元素可见时将使用初始 display 值。...期望的绑定值类型:any 详细信息 当 v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。...默认模式是高效的,但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。...如果数据项的顺序被改变,而不是移动 DOM 元素来匹配数据项的顺序, Vue 将简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

    8.8K20

    Jump Start Bootstrap 第3章

    根据列表的类型,列表的子元素可以是或者;子元素需要包含类”list-groupitem”。...链接的列表 当你想用列表显示链接的时候,列表的子元素应该用,而不是用,同样列表的元素应该是而不是 徽章组件 我们也能在每个列表项旁边使用徽章组件来显示数字(例如那些用来指示等待通知的文件...这里,data-target属性持有我们尚未定义的部分的id。当单击按钮时,该部分将被切换。按钮中的span元素用来显示图标【注:图标中的横线】。...徽章主要用于显示诸如未读项、通知等数字,而不是文本。 徽章是自崩溃的组件,即当标签未包含内容时,徽章在页面上是不可见的。...当输入无效值时,帮助块将出现在对应的输入字段之下。

    13.9K20

    看,官方出品了 Vue 编码风格指南

    当在组件中使用 data 属性的时候 (除了 newVue 外的任何地方),它的值必须是返回一个对象的函数。 详解 当 data 的值是一个对象时,它会在这个组件的所有实例之间共享。...当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。...详解 更简单、命名得当的计算属性是这样的: 易于测试 当每个计算属性都包含一个非常简单且很少依赖的表达式时,撰写测试以确保其正确工作就会更加容易。...更好的“拥抱变化” 任何能够命名的值都可能用在视图上。举个例子,我们可能打算展示一个信息,告诉用户他们存了多少钱;也可能打算计算税费,但是可能会分开展现,而不是作为总价的一部分。...默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。

    1.3K10

    看,官方出品了 Vue 编码风格指南!

    当在组件中使用 data 属性的时候 (除了 newVue 外的任何地方),它的值必须是返回一个对象的函数。 详解 当 data 的值是一个对象时,它会在这个组件的所有实例之间共享。...当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。...详解 更简单、命名得当的计算属性是这样的: 易于测试 当每个计算属性都包含一个非常简单且很少依赖的表达式时,撰写测试以确保其正确工作就会更加容易。...更好的“拥抱变化” 任何能够命名的值都可能用在视图上。举个例子,我们可能打算展示一个信息,告诉用户他们存了多少钱;也可能打算计算税费,但是可能会分开展现,而不是作为总价的一部分。...默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。

    1.4K10

    vuejs中的组件以及父子组件间通信传值

    的经典例子 同样,我会一步一步从原生js,jQuery在到vuejs,并且实现父子元素的通信,实现效果如下图所示: 输入框内输入值,点击添加按钮,将表单中的值添加到页面中,同时,又可以删除列表项内容,注意是删除列表项而不是隐藏...迫使其重新排序的元素,你需要提供一个key的特殊属性 其实使用index做列表的key值也不是一个最好的选择,如果不需要给列表进行排序进行额外的操作,如果频繁的需要跟列表进行变更的时候,使用index是存在问题的...,而index代表的是索引,in 后面的是数据中的数组名 从上面的效果中看出,在我们每次进行表单输入值,点击添加按钮添加事件操作时,页面中都会新增出现一条列表项,而且每个列表项在结构样式上都是相似的,那么我们就可以把这个列表项封装成一个组件的...DOM中使用一个组件(而不是在字符串模板template或者单文件组件的时候),官方推荐w3c标准自定义组件名(字母全小写且必须包含一个连字符,烤串式写法) 例如下面全局注册component-a,component-b...子组件向父组件传值通信 通过以上示例看出,当父组件根实例app里面data的list数据发生变化时,子组件TodoList也会发生变化,也就是说父组件里面的数据会影响子组件的显示,那么问题来了,现在我想要点击列表删除该项

    20.5K10

    【Playwright+Python】系列教程(五)元素定位

    in").click() 说明:按名称为“Sign in”button的角色找到元素。...example.com").fill("playwright@microsoft.com") 4、通过文本定位 按占位符查找输入语法:page.get_by_text()Dom结构示例: 示例代码: # 可以通过元素包含的文本找到该元素...("Issues count")).to_have_text("25 issues") 说明:当元素具有 title 属性时,建议使用此定位器7、按测试 ID 查找根据元素data-testid 属性来定位元素...").click() 4、按下标定位指定元素 您有一个相同元素的列表,并且区分它们的唯一方法是顺序,则可以使用 locator.first、locator.last 或 locator.nth() 从列表中选择特定元素...banana = page.get_by_role("listitem").nth(1) expect(banana).to_have_text('banana') 5、链接筛选器定位元素 当您有具有各种相似性的元素时

    49610

    前端:Vue前端开发规范,值得收藏!

    组件文件 只要有能够拼接文件的构建系统,就把每个组件单独分成文件。 当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。...这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。...完整单词的组件名 组件名应该倾向于完整单词而不是缩写。...模板中简单的表达式 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。 复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么,而非如何计算那个值。...非 Flux 的全局状态管理 应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。

    1.5K40

    重读vue2.0风格指南,我整理了这些关键规则

    v-for设置键值 提到 v-for需要设置键值,许多人第一反应会从 diff算法的角度去讲原因,我更喜欢举一个例子来演示一下原因 假设有这样的一个页面,页面的列表是通过遍历数组得来的,如下图所示 ?...下面我们分别在渲染列表是 不使用key,使用索引作为key, 使用唯一值id作为key,看三种场景删除第二个元素之后的效果 v-for 不使用 key 点击查看代码演示 ?...,然后在原来数据里面寻找,发现存在相同id的数据,而且数据没有变化,所以保持不变 计算机继续取第二项的id,发现是3,然后从原来数据里面也找到了3,所以3保留 这时候旧数据里面剩了id为2的数据,而新的里面没有了...使用 v-for="item in list" 之后,我们在渲染的时候只遍历需要显示的数据,渲染更高效。 解耦渲染层的逻辑,可维护性比较高。...--html 添加了一个新属性 data-v-039c5b43,对于组件内的所有元素,都会添加同一个属性data-v-039c5b43,这样保证了同一个组件内所有元素都在同一个作用域内--> button

    82850

    使用纯Python构建Web应用

    todo-list 的 div 元素渲染,当页面加载完成后,htmx 会向服务器发送一个 GET 请求,服务器返回一个待办项列表的 HTML 片段,然后将其插入到 todo-list 元素中。...表单的提交也由 htmx 处理,当用户点击提交按钮时,htmx 会向服务器发送一个 POST 请求,服务器将新的待办项添加到数据库中,然后返回一个待办项列表的 HTML 片段,htmx 将其插入到 todo-list...,于是我封装了一个 render_todos 函数,用于渲染待办项列表的 HTML 片段。...其中每一个待办项都是一个 li 元素,包含一个 span 元素和一个删除按钮。...后端接口 整体比较简单,只有三个接口,分别用于获取待办项列表、添加新待办项和删除待办项。 与常规的 restful 接口不同的是,这里的接口都返回 HTML 片段,而不是 JSON 数据。

    31530

    【CSS】253- 从原型图到成品:步步深入 CSS 布局

    p 标签代表段落,而推文的内容文本有点类似于一个段落。 ul 标签代表无序列表(与有序列表或数字序号列表相对应),在本示例中,你可以用它来存放列表信息。...由于一些原因,我决定用 Flexbox 布局而不用 Grid 布局。我觉得 Flexbox 布局更易于学习,也更适用于轻量级的布局。当布局中主要是行或者主要是列时,Flexbox 布局的表现更出色。...该是多宽就是多宽,没有 border 的干扰(padding 在 border 的内侧;而 margin 在外侧)。 但当事关可维护性、对元素的全局观时,这就有区别了。...移除列表的样式 无序列表 ul 和其中的列表项 li 在左侧窝藏了很大空间,还有一些圆点。这都不是我们想要的效果。 我们可以把无序列表左侧的空隙都清除掉。...列表项有个属性是 list-style-type,默认值为 disc,使得每个列表项以圆点开头,我们用 list-style: none; (list-style 是一个缩写属性,整合了几个其他属性,其中就包括

    4.4K51

    BootStrap应用开发学习入门

    页面标题(Page Header) 它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。...定义列表:在这种类型的列表中,每个列表项可以包含 dt 和 dd 元素。 dt 代表 定义术语,就像字典。接着dd 是dt 的描述。...,分别是9px和15px,其他时候margin值随着屏幕的增大而增大。....#按钮状态 .active #按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。...-- a 标签外层可以不是 btn-group包含 一个父div设置即可 与 button的不同-->

    14.6K30

    BootStrap应用开发学习入门

    页面标题(Page Header) 它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。...定义列表:在这种类型的列表中,每个列表项可以包含 dt 和 dd 元素。 dt 代表 定义术语,就像字典。接着dd 是dt 的描述。...,分别是9px和15px,其他时候margin值随着屏幕的增大而增大。....#按钮状态 .active #按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。...-- a 标签外层可以不是 btn-group包含 一个父div设置即可 与 button的不同-->

    17.6K20

    Svelte 3 快速开发指南(对比React与vue)

    而不是 React 或 Vue?...用“each”创建列表 在 React 中,我们已经习惯了创建元素列表的映射功能。在 Svelte 中有一个名为“each”的块,我们要用它来创建一个链接列表。...我需要data,它存在于 Fetch.svelte 中,这点很重要,因为我不想手动去创建列表。 在 React 中你可以找到一个 HOC、渲染 props 或 hooks。...因此当使用块作为插槽时,可以将数据传递给它的子节点。 现在我希望用户根据他在表单中输入的搜索词来过滤数据。看起来像 Form 和 Fetch 需要沟通。让我们看看如何实现这一点。...Svelte 比 React 更直观,特别是当一个初学者在 hook 时代去接触 React 时。当然,React 不会很快消失,但我很期待看到 Svelte 的未来。

    12.2K30

    Vue基础:条件渲染、列表渲染、事件处理

    条件渲染 v-if Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。...可以通过添加一个具有唯一值的 key 属性,来达到每次切换时,输入框都将被重新渲染 Username 值,list列表自动发生变化 --> list[0].name"> 完整示例参考地址:https://jsfiddle.net/381510688...= Object.assign({}, this.someObject, { a: 1, b: 2 }) 注意:当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用”....stop:阻止单击事件冒泡 .prevent:禁止默认行为 .capture:使用事件捕获模式 .self:只当事件在该元素本身(比如不是子元素)触发时触发回调【不接受冒泡上来的事件】 .once:点击事件将只会触发一次

    1.9K41

    通过防止不必要的重新渲染来优化 React 性能

    当一个组件重新渲染时,React 默认也会重新渲染子组件。...因为每次应用重新渲染时,onClickIncrement 属性的值都会改变。 每个函数都是一个不同的 JavaScript 对象,因此 React 会看到 prop 更改并确保更新 Counter。...如果每个列表元素都有一个一致的键,那么即使添加或删除列表项,React 也可以避免重新渲染组件。...键应该是唯一的,并且列表中的任何两个元素都不应具有相同的键。 我们上面使用的 item.name 键并不理想,因为多个列表元素可能具有相同的名称。...在可能的情况下,保持 DOM 结构相同。 例如,如果您需要在列表中的组之间显示分隔符,请在列表元素之间插入分隔符,而不是为每个组添加包装 div。

    6.2K41
    领券