custom-data-attribute 相关问题

自定义元素上的非数据属性可以成为标准属性吗？ [已关闭]

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

我们应该在自定义 Web 组件中使用数据属性吗？

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

如何在HTML元素中设置数据属性

我有一个带有属性 data-myval =“10”的 div。我想更新它的值；如果我使用 div.data('myval',20) 不会改变吗？我只需要使用 div.attr('data-myval','20') 吗？ 我得到确认了吗...

HTML 数据属性和 jQuery 的 .data() 是一样的吗？

在 HTML 中，可以为元素设置自定义“data-”属性，例如 jQuery 框架具有执行类似操作的方法（.data() 等）。我的问题是... 在 HTML 中，可以为元素设置自定义“data-”属性，例如 <div data-blah="blah"> jQuery 框架有方法来做类似的事情（.data() 等）。我的问题是 jQuery 方法只是操作和读取这些 html5 数据属性，还是它们引用不同的 jQuery 类型数据属性？ 不，完全不同的事情。 jQuery 的 .data() 甚至在 W3C 将它们添加到 HTML 版本 5 之前就已经存在了。 详情请参阅https://api.jquery.com/data/。 要从 HTML 标记获取 HTML 数据属性值，请尝试： jQuery('selector here').attr('data-blah');

Jquery DataTable 在运行时更新 `data-sort` 属性不影响排序

我有一个数据表，其中第一个 td 中有复选框 有些正在检查，有些则未从数据库中检查 默认情况下，它不会对选中/未选中进行排序，因此我还添加了数据排序属性...

React 的类型声明例如React.HTMLAttribute<HTMLButtonElement> 支持开箱即用的自定义数据属性吗？

我正在尝试创建一个可以传播到 React 组件中的对象，并且该对象必须包含 HTML 自定义数据属性。 从 'react' 导入 { HTMLAttributes } 接口 FooProps 扩展...

如何删除 td 具有特定数据属性值的 tr

我试图在ajax成功后从DOM中删除一个tr，其中这个tr的td具有特定的数据值 这是 HTML： 第一 我试图在ajax成功后从DOM中删除一个tr，其中这个td的tr具有特定的data-value值 这是 html: <tr> <td data-value="1">First</td> </tr> <tr> <td data-value="2">Second</td> </tr> <tr> <td data-value="3">Third</td> </tr> ...... 我的ajax javascript: success: function (data) { var identity = data.val; // gives me the number 2 // find td which has data-value of 2 and remove the corresponding tr of it from DOM $('td[data-value=identity]').closest('tr').remove(); // does not work }, 我怎样才能实现这个目标？ 我建议您非常具体地了解带有“td”标签的表格。 $('td[data-value="'+ identity +'"]').closest('tr').remove(); 评论中回答的上述代码仅适合您： 如果 HTML DOM 中有单个表，其中“tr”标签作为“td”标签的父元素，其上有 data-value=“identity”。 如果 HTML DOM 上有多个表，此代码将从 DOM 内的开始/第一个“元素”开始检查，一旦找到具有 data-value='identity' 属性的“td”标签，它将删除父“tr”元素，无论 DOM 内可能有多个表，或者您希望从表 2 中删除“tr”标签，但它按照上面的代码从表 1 中删除了“tr”标签。 如果您想定位表内的任何标签（因为在未来的开发中同一页面上可能有多个表），在 jQuery 选择器中指定表名称并根据要求将其遍历到特定的子元素始终是一个很好的做法). 您可以将上面的代码即兴编写为， $('#specific-table-name tbody td[data-value="'+ identity +'"]').closest('tr').remove(); 此代码将首先在整个 DOM 中查找表名称，然后遍历该表的“tbody”标签并搜索具有 data-value="identity" 的“td”元素 -> 然后删除最近的“tr”。 注意：如果要删除多个 data-value="identity"，请使用 .each/.map 方法迭代表以获得所需结果。

如何修复“无法读取未定义的属性‘getAttribute’？

我正在尝试制作一个简单的计算器，但在尝试使用 getAttribute 方法检索我的自定义 data-* 属性后陷入困境。 我确保用于存储元素的 var 确实......

CSS中按属性选择元素

是否可以通过 HTML5 数据属性（例如 data-role）来选择 CSS 中的元素？

Linkify.js.org (jQuery) HashTags：将默认 URL 目标更改为 Twitter？

我正在清理来自各种第三方 XML 源的 CDATA 内容，剥离所有 HTML 服务器端并使用 Linkify.js.org (v3.0.3) 安全地将 HTML 标签重新应用到清理后的纯文本链接客户端...

如何显示 div[data-attr="false"]:first-ot-type 的一些 CSS `content`？

考虑下面的html/css，关于CSS选择器的双重问题。 可以仅对旧数据的第一行显示“旧数据的标头”，而不是对每个数据重复它（我...

查找多个 HTML 元素的子元素并用作自定义属性的功能

所以我有以下包含多个 元素的结构，我想在数据属性（data-children）中显示每个元素内的子元素。而不是手动更改 att... 因此，我有以下包含多个 <div> 元素的结构，我想在数据属性 (data-children) 中显示每个元素内的子元素。我希望它能够通过 JS 动态变化，而不是手动更改属性，这样当我添加/删除子元素时它就会发生变化。 <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> 所以现在我正在执行以下操作来获取每个元素的子元素并填充每个标题的 data-attribute： const parentContainer = document.querySelectorAll('.parent_container') const amountTitle = document.querySelectorAll('.amount_title') let childrenAmount1 = parentContainer[0].childElementCount amountTitle[0].dataset.children = childrenAmount1 let childrenAmount2 = parentContainer[1].childElementCount amountTitle[1].dataset.children = childrenAmount2 我有一些这样的东西，所以显然不理想。哪个函数可以帮助我遍历所有这些元素并用每个元素的子元素数量相应地填充每个数据集？谢谢你。 我尝试执行 for () 循环，但所有数据集都从数组中的最后一项获取了子项的数量 基于此配置，您的最佳策略是获取每个标题后的下一个元素。 虽然我建议使用包装器根据每个包装器内容设置标题.wrapper > amount_title|parent_container首先循环遍历所有包装器并从包装器引用中获取其子级 const titles = document.querySelectorAll(".amount_title"); titles.forEach((title) => { const next = title.nextElementSibling; if (!next.classList.contains("parent_container")) { return false; } // killswitch title.innerHTML = `The amount of children of this element is ${ next.childElementCount }`; }); <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> 编辑： 包装方法： const wrappers = document.querySelectorAll(".wrapper"); wrappers.forEach((wrapper) => { const title = wrapper.querySelector(".amount_title"); const contents = wrapper.querySelector(".parent_container"); if (!title || !contents) { return; } // killswitch title.innerText = `The amount of children of this element is ${ contents.childElementCount }` }); <div class="wrapper"> <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> </div> <div class="wrapper"> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> </div> 只需选择所有标题并使用 forEach 循环即可循环浏览所有这些标题。然后选择下一个兄弟并计算所有具有 child_element 类的元素： window.addEventListener('DOMContentLoaded', getAmountTitles); function getAmountTitles() { const HEADLINES = document.querySelectorAll('h2.amount_title'); HEADLINES.forEach(headline => { let parent_container = headline.nextElementSibling; let amountChildElements = countChildrenElements(parent_container); headline.dataset.children = amountChildElements; headline.insertAdjacentText('beforeend', amountChildElements); }); } function countChildrenElements(parentElement) { return (parentElement.querySelectorAll('.children_element').length); } <h2 class="amount_title">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div>

vuejs中如何获取data-*属性的值

我有一个按钮，单击该按钮会打开一个模式，模式中显示的内容基于传递给按钮的数据属性。 我的按钮， 我有一个按钮，单击该按钮会打开一个模式，模式中显示的内容基于传递给按钮的数据属性。 我的按钮， <button class="btn btn-info" data-toggle="modal" data-target="#someModal" :data-id=item.id :data-name=item.name> Edit </button> 在我的模态中，我有一些按钮，单击时我应该使用参数（即数据属性）调用 vuejs 函数。 我的模态按钮， <div class="modal-footer"> <button type="button" class="btn btn-danger" @click.prevent="deleteItem()" data-dismiss="modal"> Delete </button> <button type="button" class="btn btn-warning" data-dismiss="modal"> <span class='glyphicon glyphicon-remove'></span> Close </button> </div> 这里我必须向deleteItem()传递一个参数，该参数就是我从上面的按钮获得的data-id。 模态代码 <div id="deleteModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Delete</h4> </div> <div class="modal-body"> <div class="deleteContent"> Are you Sure you want to delete ? </div> <div class="modal-footer"> <button type="button" class="btn actionBtn btn-danger" @click.prevent="deleteItem()" data-dismiss="modal"> Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span> </button> <button type="button" class="btn btn-warning" data-dismiss="modal"> <span class='glyphicon glyphicon-remove'></span> Close </button> </div> </div> </div> </div> </div> HTML <button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal"> Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span> </button> Vue methods:{ deleteItem: function(){ var id = event.target.getAttribute('data-id'); console.log(id) // 1 } } 这是演示https://codepen.io/maab16/pen/jONZpVG 我建议在组件函数内执行 console.log(this)，然后在单击按钮时调用该函数，以便您可以检查组件的所有属性。 （请参阅下面的附图，例如上述 console.log 语句的输出。） 这表明您可以访问包含 DOM 元素的 $el 属性。这带来了很多可能性，例如能够将以下代码添加到组件的 mounted 生命周期挂钩中： mounted() { console.log(this); this.myAttribute = this.$el.getAttribute('data-attribute-name'); }, 对于本示例， this.myAttribute 将在（例如）您的数据属性中定义： // This value gets attributed during an earlier lifecycle hook. // It will be overridden in the component's mounted() lifecycle hook. data() { return { myAttribute: 'defaultvalue' } } Vue.js (v2) 生命周期钩子文档 在组件内执行 console.log(this) 时的示例输出： 您也可以像这样传递“item.id”： <button type="button" @click="deleteItem(item.id)">Delete</button> 一个简单的选项是将 id 绑定到删除按钮 <button type="button" class="btn btn-danger" @click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal"> Delete </button>

jQuery基于多个数据属性过滤div

我在一个页面上有多个具有以下数据属性的div：数据一、数据二、数据三、数据四和数据五。以下代码创建一个数组，如下所示：['one-value', 'two-val...

我在使用 DataLoader 时遇到 KeyError: 'bboxes'，为什么会发生这种情况？

我正在使用 PyTorch 框架进行图像分类，并遇到以下错误： KeyError：在 DataLoader 工作进程 0 中捕获 KeyError。 原始回溯（最新...

如何向 WordPress 导航菜单中的 <li> 元素添加数据属性

我在 WordPress 网站上使用 fullpage.js，并且想使用它的功能之一，即在 li 上添加一个类。但要做到这一点，您需要添加数据属性 data-menunchor 。 我看到了...

React-Select：向输入添加自定义数据属性

我使用ReactJS v18.2和react-select v5.7。 我想将自定义属性（例如 data-test）添加到我的 组件的输入元素，我在文档中找不到类似的东西.... 我使用ReactJS v18.2和react-select v5.7。 我想向我的 data-test 组件的输入元素添加自定义属性（例如 <Select/>），我在文档中找不到类似的内容。 对于我自己的自定义功能组件，只需将其添加到 html 标签即可，例如 <input type="text" test={XYZ}/> 对于react-select，它根本不显示在DOM中。我该如何解决它？ 我遇到了同样的问题，并使用了解决方法来使其工作。为此，我必须创建一个自定义输入组件。 import React from 'react' import Select, { components } from 'react-select' const CustomInput = (props) => { return ( <components.Input {...props} data-test="abc" // put the value you want.. /> ) } const CustomSelect = () => { return ( <Select components={{ Input: CustomInput }} options={[ /* your options here */]} /> ) } export default CustomSelect

jQuery 从选择器 onchange 获取数据 ID

是否可以在更改事件期间获取数据属性值？ jQuery(文档).ready(函数($) { $('.mystatus').on("改变", function() { var value = this.value; 一个...

使用 HTML 数据属性设置 CSS 背景图像 url

我计划为朋友构建一个自定义照片库，我确切地知道我将如何生成 HTML，但是我遇到了 CSS 的一个小问题。（我宁愿没有

需要用vanilla js设置一个没有值的data-*

我正在从我拥有的部分动态创建链接列表： $sections.forEach(({ id, firstElementChild: { textContent } }) => { const link = document.createElement('a'); 链接类...