Question

我想找到元素子元素所在的实际索引（在HTML标记中）。

说我有以下标记：

<p id="foo">Lorem <i>ipsum</i> d<strong>ol</strong>ar</p>

以下代码：

var $foo = $('#foo');
var children = $foo.children();
for (var i = 0; i < children.length; i++) {
    console.log(children[i]);
}

这会输出元素<i>ipsum</i>和<strong>ol</strong>。有没有办法计算这些元素从父元素#foo的HTML索引6和20开始？我想避免使用基于元素的tagName的REGEX方法，但这是我迄今为止提出的唯一解决方案。

是否有任何我忽略的解决方案/ API可以解决这个问题而不会过多地复杂化问题？我想在嵌套标签的支持下尽可能地使其成为通用的，例如， #foo > i是基本元素，我查看它是否有任何嵌套标记。

谷歌这也很棘手，因为大多数问题/答案都涉及实际位置，而不是HTML标记中的位置。

工作示例：

var $foo = $('#foo');

var startIndex = 0;
var children = $foo.children();
for (var i = 0; i < children.length; i++) {
	console.log($foo.html());
	console.log('<' + $(children[i]).get(0).tagName.toLowerCase());
	var this_index = $foo.html().substr(startIndex).indexOf('<' + $(children[i]).get(0).tagName.toLowerCase());
	console.log(startIndex + this_index);
	console.log('----');

	// Update startIndex (to avoid returning the first occurence if multiple children of same type)
	startIndex = this_index;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo">Lorem <i>ipsum</i> d<strong>ol</strong>ar</p>

输出：

Lorem <i>ipsum</i> d<strong>ol</strong>ar
<i
6
----
Lorem <i>ipsum</i> d<strong>ol</strong>ar
<strong
20
----

然而，这是一个相当丑陋的解决方案，并且基于字符串匹配。有没有办法根据子元素进行搜索/匹配？这将限制标记无效的可能性（例如大写的HTML标记）。

Answer 1

$foo.html().indexOf(children[i].outerHTML)应该有效

Answer 2

您可以在包含父节点的内部html的字符串上使用indexOf，并搜索包含子节点的外部html的字符串：

var haystack = document.querySelector('#foo');
var needle = haystack.querySelector('i');
var startIndex = haystack.innerHTML.indexOf(needle.outerHTML);
var endIndex = startIndex + needle.outerHTML.length;

document.writeln('start: ' + startIndex + '<br> end: ' + endIndex);

<p id="foo">Lorem <i>ipsum</i> d<strong>ol</strong>ar</p>

同样，如果您将i替换为strong并生成start: 20 end:39

，它也会有效

在HTML标记中查找子元素的索引

2 个答案: