querySelector (GetElementByID) - 多个 ID

2024-01-12

我有将公历日期转换为贾拉里日期的功能,它适用于一个标签,但我在一页中有未指定数量的此标签,并且它必须转换所有主题。

我知道 getElementById 一次支持一个名称,我正在尝试 querySelector 和 getElementsByClassName 但它不起作用

function gregorian_to_jalali(gy, gm, gd) {
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  if (gy > 1600) {
    jy = 979;
    gy -= 1600;
  } else {
    jy = 0;
    gy -= 621;
  }
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100)) + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
  jy += 33 * (parseInt(days / 12053));
  days %= 12053;
  jy += 4 * (parseInt(days / 1461));
  days %= 1461;
  if (days > 365) {
    jy += parseInt((days - 1) / 365);
    days = (days - 1) % 365;
  }
  jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
  jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
  return [jy, jm, jd];
}

const dateElement = document.querySelector('date')
const year = Number(dateElement.dataset.year) // "2019"
const month = Number(dateElement.dataset.month) // "2"
const day = Number(dateElement.dataset.day) // "6"
dateElement.textContent = gregorian_to_jalali(year, month, day).join('/')
<date data-year="2019" data-month="5" data-day="7"></date>
<date id="date" class="date" data-year="2019" data-month="2" data-day="7"></date>
<div id="date" class="date" data-year="2019" data-month="2" data-day="8"></div>
<div id="date" class="date" data-year="2019" data-month="2" data-day="9"></div>
<div id="date" class="date" data-year="2019" data-month="2" data-day="10"></div>

您的代码存在一些问题:

  • 不存在这样的事情date元素。你应该使用div反而。

  • An id(标识符)对于其元素必须是唯一的,不能在其他元素上重复。相反,您应该使用class。此刻你有一个date所有元素的类,除了第一个。因此,如果您添加date类到你的第一个元素。完成后,您可以使用document.getElementsByClassName() https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName获取页面上具有该类的所有元素date.

    document.getElementsByClassName()将返回一个HTML集合 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection,因此您可以使用将其转换为数组扩展语法 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax (...)。将您的集合转换为数组将允许您使用循环遍历它.forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach. Using .forEach您可以使用该类访问每个元素date,然后你可以用它来拉它的data-*属性来自.

请参阅下面的工作示例:

function gregorian_to_jalali(gy, gm, gd) {
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  if (gy > 1600) {
    jy = 979;
    gy -= 1600;
  } else {
    jy = 0;
    gy -= 621;
  }
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100)) + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
  jy += 33 * (parseInt(days / 12053));
  days %= 12053;
  jy += 4 * (parseInt(days / 1461));
  days %= 1461;
  if (days > 365) {
    jy += parseInt((days - 1) / 365);
    days = (days - 1) % 365;
  }
  jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
  jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
  return [jy, jm, jd];
}


const dateElements = document.getElementsByClassName("date"); // get all elements with the class "date"
[...dateElements].forEach(function(dateElement) { // loop through each element, where dateElement is the current node
  const year = Number(dateElement.dataset.year);
  const month = Number(dateElement.dataset.month);
  const day = Number(dateElement.dataset.day);
  dateElement.textContent = gregorian_to_jalali(year, month, day).join('/');
})
<div class="date" data-year="2019" data-month="5" data-day="7"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="7"></div>
<br />
<div  class="date" data-year="2019" data-month="2" data-day="8"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="9"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="10"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

querySelector (GetElementByID) - 多个 ID 的相关文章

  • 正则表达式中的“g”标志是什么意思?

    的含义是什么g正则表达式中的标志 之间有什么区别 g and g用于全局搜索 这意味着它将匹配所有出现的情况 通常你还会看到i这意味着忽略大小写 参考 全局 JavaScript MDN https developer mozilla or
  • 使用 jQuery / .data() 避免内存泄漏

    我正在使用 jQuery 动态创建 HTML 元素 现在需要针对它们存储 JavaScript 数据 但是 我现在担心内存泄漏 因为我实际上从未在对象上调用 删除 我 append 和 detach 它们 但从不 remove jQuery
  • Google Charts(AreaChart)如何检测缩放变化

    我正在画一个面积图 在覆盖层上有一些标记 我正在使用explorer选项 仅限水平 以便用户放大和缩小 问题是我找不到一种方法来通知缩放更改 以便有机会更新制造商位置 有一个图表范围变化事件 但它不是由 AreaChart 触发的 我尝试检
  • Streamjs和linqjs有什么关系

    读完SICP后 我最近发现streamjs https github com dionyziz stream js 开发商参考linqjs http linqjs codeplex com 作为具有不同语法的替代实现 但我无法建立连接 St
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 卸载/销毁 Angular 延迟加载组件

    我的设置与此处找到的帖子类似http ify io lazy loading in angularjs http ify io lazy loading in angularjs 处理 Angular 中我的应用程序的各种组件的延迟加载 我
  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 哪些网络浏览器不支持 Javascript?以及如何识别客户端使用的是哪个浏览器?

    是否有不支持 javascript 的网络浏览器 以及如何确定客户端是否正在使用这些浏览器之一 或者客户端禁用了javascript 是否有不支持 javascript 的网络浏览器 当然 Lynx http en wikipedia or
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 无法在渲染器进程中使用 Node.js API

    无法在 Electron 中使用任何与 Electron 或节点相关的操作 未定义获取错误过程 我检查了他们指导添加节点支持的各个地方 但这已经完成了 所以卡在这里 我的主要应用程序代码是 const electron require el
  • 带时间戳的 Firestore 查询

    如果它是文本字段 我可以使用 where 条件获取数据 但是当我尝试对时间戳字段和日期执行相同操作时 事情不起作用 这是我的代码 home ts firebase firestore collection cities where time
  • 浏览器默认区域设置 - Intl.DateTimeFormat 与 navigator.language

    在对网站进行编码并格式化日期时 我想使用用户在浏览器中设置的区域设置 例如 如果用户定制了他们的chrome settings languages在 Chrome 中设置为非默认值 这就是我想要使用的值 但是 当我在此类浏览器的控制台中运行
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • (0, eval) () 的作用是什么? [复制]

    这个问题在这里已经有答案了 以下内容来自这个问题 https stackoverflow com questions 14119988 return this 0 evalthis 14120023 14120023 function q
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • javascript window.open 在 safari 中

    我在 safari ipad 和桌面版本 中打开一个新窗口时遇到了一个与弹出窗口阻止程序有关的问题 基本上我发现如果 window open 没有从点击事件中调用 safari 将阻止弹出窗口 调用 window open 的事件当前正在从
  • 在列表视图中添加复选框 (C#)

    我想在 C 应用程序中显示一个列表视图 其中每一行代表一个产品 因此属性 视图 设置为 详细信息 一列 最后一列 应该是一个复选框 因为它代表产品是否打折 将 checkboxes 属性设置为 true 后 第一列中会出现一个复选框 因此它
  • 如何使用php获取oracle 11g xe中最后插入记录的序列id?

    在这里 我试图插入一条记录并检索最后插入的序列ID 但没有取得任何成功 有人可以帮助我 指导我oracle如何与php一起工作吗 query INSERT INTO hist news id headline reportedon repo
  • .NET Core WebAPI 后备 API 版本,以防缺少次要版本

    经过多次尝试和阅读文章后 我决定将我的问题放在这里 我想要的是 我正在研究应用程序的 api 版本控制 NET Core 支持的版本格式 Microsoft AspNetCore Mvc Versioningpackage 是 Major
  • 将 git 子模块协议从 git 替换为 http

    我从 git URL 添加一个子模块 以便能够在其中进行开发 现在我想部署应用程序并将 URL 替换为 git 因此它不需要从 Capistrano 对子模块的存储库进行身份验证 编辑 gitmodules 中的 URL 是否足以完成此任务
  • TypeScript -> AST -> TypeScript

    有没有办法将 TypeScript 文件解析为 AST 修改 AST 然后将其解析回 TypeScript 作为工具Esprima http esprima org 埃斯科德根 https github com estools escode
  • setNeedsLayout 和 setNeedsDisplay

    两者之间真正的区别是什么UIView方法setNeedsLayout and setNeedsDisplay 像往常一样 文档对此模糊不清 其实文档对此说得很清楚 设置需求布局 http developer apple com librar
  • 确定锁升级的阈值

    我有一个包含大约 250 万条记录的表 将更新其中大约 70 万条记录 并且希望更新这些记录 同时仍允许其他用户查看数据 我的更新语句看起来像这样 UPDATE A WITH UPDLOCK ROWLOCK SET A field B fi
  • 使用 Cython 编译 Python 脚本是否会减少启动时间?

    众所周知 Python 程序启动速度有点慢 用cython编译整个程序可以解决这个问题吗 None
  • 如何在重定向中发送参数 - php codeigniter

    下面的代码给了我一个错误 我想调用一个函数并使用 php codeigniter 向其传递一个参数 redirect base url MainController Student Login user email 这里 MainContr
  • 无法在管道阶段定义变量

    我正在尝试创建一个声明性 Jenkins 管道脚本 但在简单变量声明方面遇到问题 这是我的脚本 pipeline agent none stages stage first def foo foo fails with WorkflowSc
  • 如何返回前一个索引之后的下一个索引?

    例如 str a b c d e f str indexOf 0 str lastIndexOf 12 如何获取第二个括号中的索引 c d int first str indexOf int next str indexOf first 1
  • 从 MVC / IIS Web 应用程序为包含子域提供服务

    我在 tumblr 上托管我的网站博客 博客 withoomph com 我已经修改了博客上的主题 并且想使用我在主网站上使用的自己的字体 我正在尝试从以下位置获取字体 beta withoomph com 但是 当页面尝试获取字体时 我收
  • aio_write() 和 O_NONBLOCK write() 之间的区别

    aio write 和 O NONBLOCK write 有什么区别 另外 我使用 O NONBLOCK 函数使用文件描述符对文本文件进行 write 操作 并通过在函数前后放置一个计时器来将性能与 aio write 进行比较 当字符串长
  • 使用iOS 9.0中的CNContactPickerViewController,如何启用/禁用单选或多选?

    委托 CNContactPickerDelegate 具有用于单选和多项选择的方法 但是当我们呈现视图控制器时 我们如何指定我们想要单选或多选呢 我想我错过了一些可能也会导致我所描述的问题的东西 CNUI 错误 设置了选择谓词 但委托未实现
  • Woocommerce 3 中的可编辑管理自定义计费字段错误问题

    我在此代码中遇到错误 在订单编辑页面中添加可编辑的自定义计费字段 add filter woocommerce admin billing fields order admin custom fields function order ad
  • WordPress 单个帖子内容不显示

    我有一个 WordPress 博客主题 它可以很好地显示索引上所有帖子的内容 但是当我点击其中一篇帖子时 该帖子的内容是空白的 我似乎不明白为什么 如果我是正确的single php控制该页面 http pastebin com afLVx
  • Service Worker 可以获取并缓存跨源资产吗?

    我正在使用一些服务人员代码Google 的渐进式 Web 应用程序教程 https developers google com web fundamentals codelabs your first pwapp 但我收到错误 Uncaug
  • 在 C++ 中声明“全局”变量时,“静态”究竟意味着什么?

    这是一个范围的扩展我之前的问题 https stackoverflow com questions 3415781 what exactly does static mean when declaring global variables
  • querySelector (GetElementByID) - 多个 ID

    我有将公历日期转换为贾拉里日期的功能 它适用于一个标签 但我在一页中有未指定数量的此标签 并且它必须转换所有主题 我知道 getElementById 一次支持一个名称 我正在尝试 querySelector 和 getElementsBy