Question

我正在一个网站上工作，该网站是一本书的在线版本。本书有很多版本，因此网站使用可变分页处理各种版本 - 用户选择他的版本并显示页码。

页面以HTML标签编码。所以，例如：

text 
<span id=ed19xxpgxxx> </span> 
text 2

其中span标记的id是版本和页码。每个版本中的每个分页符都会重复此操作。

现在，我需要做的是能够抓住所有以我正在使用的版本开头的ID，例如ed1939。然后我需要获取与ID相关联的每个页码并插入该页码。我正在思考的是找到所有这些字符串，从中删除页码信息，然后将它们插入到HTML中。根据我的研究（1，2），我认为我需要使用querySelectorAll。但我不是很有经验，而且我不知道该怎么做。到目前为止，我所看到的所有参考文献都只涉及选择具有共同起始字符串的id，而不是操纵它们。

现在使用的解决方案是在非常长的if块中使用document.getElementById 每个唯一ID ，这可能会得到改进。

Answer 1

一种可能的解决方案是找到所有这些span之间的共同祖先。例如，如果所有页码都包含在这样的元素中：

<div class="page-numbers">
   <span id=...>
   <span id=...>
</div>

然后你应该能够一次性选择所有这些，使用：

document.querySelectorAll('.page-numbers span')

这将返回表示页码的DOM元素集合。从那里你可以获得他们的ID并切断你需要的信息。

Answer 2

以下是使用document.querySelectorAll()按照您提供给我们的模式查找范围的示例。这与所有范围匹配，其ID以ed开头。

这并不理想，有更好的方法可以做到这一点，但是如果你坚持使用目前拥有它们的格式的书籍，那么这就足够了......

var pages = document.querySelectorAll("span[id^=ed]");
pages.forEach(function(page) {
  console.log(page.id);
});

<span id="ed19pg100"> </span> 
<span id="ed19pg101"> </span> 
<span id="ed19pg102"> </span> 
<span id="ed19pg103"> </span>

您只需将console.log()替换为您想要处理的范围，page变量就是循环内的范围。

Answer 3

目前的设置并不理想;解析字符串而不是分隔数据属性（例如）会变慢，如果你有很多元素（这听起来像你可能有的话），这可能是一个因素。

总之...

var my_edition = 'ed1939';

//get all elements pertaining to pages of this edition
var page_elements = document.querySelectorAll('[id^="'+my_edition+'"]');

//loop over them and, for each...
[].forEach.call(page_elements, function(el) {

    //...extract the page number via REGEX
    var page_num = el.getAttribute('id').match(/pg(\d+)$/);
    if (page_num) {

        //...append it to the page - note the number in isolation lives in page_num[1]
        el.innerHTML = '<p>Page: '+page_num[1]+'</p>'; //or whatever you want to do
    }
});

如何获取和存储html元素

3 个答案: