考虑以下最小示例:
<p>
<ol id="First list">
<li>foo</li>
<li>bar</li>
</ol>
<ol id="Second list">
<li>baz</li>
</ol>
</p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
sel = d3.selectAll("ol")
console.log(sel)
</script>
效果很好:选择包含一个组,该组又具有两个元素(两个元素)。
但如果我将选择更改为
sel = d3.select("p").selectAll("ol")
这对我来说看起来“更准确”,因为它使用更准确的地址,选择返回一个空组(这显然是错误的)。
这是什么原因?
最佳答案
来自关于 p
的 MDN 文档元素:
The start tag is required. The end tag may be omitted if the
<p>
element is immediately followed by an<address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>,
<ol>
, <pre>, <section>, <table>, <ul>
or another<p>
element, or if there is no more content in the parent element and the parent element is not an element. (link)
<ol>
的使用在 <p>
之后/内部标记标签关闭 <p>
.在您的情况下,这意味着 <p>
标签没有内容。看看下面的代码片段,我有两个 ol
s 在 p
或者在 div
中然后我用纯 javascript 选择 parent 并记录他们的内部 html:
var p = document.getElementsByTagName("p")[0]
console.log("p:", p.innerHTML);
var div = document.getElementsByTagName("div")[0]
console.log("div:", div.innerHTML);
<p>
<ol id="First list">
<li>foo</li>
<li>bar</li>
</ol>
<ol id="Second list">
<li>baz</li>
</ol>
</p>
<div>
<ol id="First list">
<li>foo</li>
<li>bar</li>
</ol>
<ol id="Second list">
<li>baz</li>
</ol>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
因此,如果您将 ol
s 在 div
,你应该能够让它工作:
<div>
<ol id="First list">
<li>foo</li>
<li>bar</li>
</ol>
<ol id="Second list">
<li>baz</li>
</ol>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
sel = d3.select("div").selectAll("ol")
console.log("number of elements in selection: ", sel.size())
</script>
关于html - 如果为 "too exact",则选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51409620/