首页
学习
活动
专区
工具
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.5K20

react组件用法深度分析

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

5.4K20

1.1、文本插

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

8.6K20

Jump Start Bootstrap 第3章

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

13.8K20

看,官方出品了 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里面datalist数据发生变化时,子组件TodoList也会发生变化,也就是说父组件里面的数据会影响子组件显示,那么问题来了,现在想要点击列表删除该项

20.4K10

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

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

1.4K40

重读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

78850

使用纯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 数据。

24330

【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.5K30

BootStrap应用开发学习入门

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

17.4K20

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.1K30

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

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

6K41

前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

但是如果我们想切换多个元素呢?此时我们可以把一个  元素当做包装元素,并在上面使用 v-if,最终渲染结果不会包含它。...2.2、key Vue.js 用 v-for 正在更新已渲染过元素列表,它默认用 “就地复用” 策略。...如果数据项顺序被改变,不是移动 DOM 元素来匹配数据项顺序, Vue 将简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过每个元素。...这个类似 Vue 1.x track-by="$index" 。 这个默认模式是有效,但是适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入列表渲染输出。...-- 只当事件在该元素本身(不是元素)触发触发回调 --> ...

3.2K110
领券