我使用 following steps 将 Html 内容(属于电子书)分成多列.
1) 我在容器内的内容中添加了 HTML。
<body>
<div id="container">
<div id="content">
BOOK HTML CONTENT
<span id="endMarker"></span>
</div>
</div>
</body>
2) 接下来，我添加了内容和容器的 CSS 样式，如下所示:
#container {
width: 240px;
overflow: hidden;
background-color: yellow;
}
#content {
position: relative;
height: 30em;
-moz-column-width: 240px;
-webkit-column-width: 240px;
column-width: 240px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
现在，我想使用 javascript 查找文本(或行)的列号？
SO上还有其他问题，展示了如何根据id获取列号。在我的例子中，没有 id。唯一可用的是文本(或行)，我需要通过搜索 Html 内容来获取列号。
目前，我有两个“解决方案”来获取列号，但它们都不完整。
1) 我可以通过使用 window.find(text) 来查找文本是否存在之后我不确定我必须做什么。
2) 另一种选择是添加 <span>临时为每一行添加一个 id 并将其删除。添加后，我可以获得该行的总列数(如下所示)。
columnCount = Math.floor($('#marker').position().left/(columnWidth + columnGap));
如果将行扩展到另一列，这将给出错误的数字。
第二个解决方案很棘手，书籍内容也很庞大。我认为这不是获取列号的最佳方法。我正在寻找更简单的解决方案。
最佳答案
试试这个，为您的问题制作了一个可行的版本。 jsfiddle link
虽然 OP 没有用 jQuery 标记问题，但实际上在问题中使用了 jQuery，我也使用它来获得更清晰的代码。 (并符合问题)
我在这个例子中做了什么:
- 让较长的内容跨越多个页面以可视化分页(使用 css: column-width)。
- 点击上一页/下一页浏览页面。
- 输入并点击“查找”按钮，将找到的文本高亮显示。
- 列出使用输入文本找到的所有列(页面)。
- 单击链接并跳转到包含搜索文本的列。
详细来说，我制作了临时 DOM 元素来计算列，并在之后立即删除它们以保持 DOM 树干净。
2017/6/1 编辑:为搜索文本添加高亮颜色。
$('#find').click( () => {
var text = $('#findtext').val();
var columns = [];
var doms = [];
while (window.find(text, false)) {
var sel = window.getSelection();
if (sel) {
var range = sel.getRangeAt(0);
var el = document.createElement("span");
var frag = document.createDocumentFragment();
frag.appendChild(el);
range.insertNode(frag);
columns.push(Math.floor(el.offsetLeft/(_columnWidth + _columnGap)));
doms.push(el);
}
}
/// distinct
columns = columns.filter( (value, index, self) => self.indexOf(value) === index );
/// show result
$("#foundlist").empty();
for (var i=0; i<columns.length; i++)
$("#foundlist").append(`<li><a href="#" onclick="setColumn(${columns[i]})">Found in Column ${columns[i]+1}</a></li>`);
/// remove dom. keep dom tree clean
while (doms.length > 0) {
var dom = doms.pop();
dom.parentNode.removeChild(dom);
}
});
关于javascript - 如何根据文本获取列号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44131044/