查询选择交替元素
query selecting alternating elements
我有以下HTML。我需要将文本内容提取到地图数组中,例如:
[{key: 'keyone', value: 'valone'}, {key: 'keytwo', value: 'valtwo'}, ... ]
我能想到的唯一方法是两次使用 document.querySelectorAll('ol *');
提取所有元素,然后遍历每个元素并制定一些规则,比如如果它是奇数,将其添加为键,并使用以下元素作为值,然后跳过下一个元素。但这似乎真的很棘手。有一个更好的方法吗?也许使用 css 选择器,例如 :nth-last-of-type(2)
?
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
...
</ol>
您可以select所有元素,然后使用reduce得到想要的结果
const allNestedElements = [...document.querySelectorAll( "ol > *" )]
const result = allNestedElements.reduce( ( acc, curr, i ) => {
if(i % 2) acc[acc.length - 1].value = curr.textContent;
else acc.push({ key: curr.textContent })
return acc;
}, [] );
console.log( result );
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
</ol>
假设 dt-dd
成对一致,您可以映射 dt 并使用 nextElementSibling 获取关联的 dd
const dt = document.querySelectorAll( "ol dt" )
const res = [...dt].map(el => {
return {key: el.textContent, value: el.nextElementSibling.textContent}
});
console.log( res );
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
</ol>
我有以下HTML。我需要将文本内容提取到地图数组中,例如:
[{key: 'keyone', value: 'valone'}, {key: 'keytwo', value: 'valtwo'}, ... ]
我能想到的唯一方法是两次使用 document.querySelectorAll('ol *');
提取所有元素,然后遍历每个元素并制定一些规则,比如如果它是奇数,将其添加为键,并使用以下元素作为值,然后跳过下一个元素。但这似乎真的很棘手。有一个更好的方法吗?也许使用 css 选择器,例如 :nth-last-of-type(2)
?
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
...
</ol>
您可以select所有元素,然后使用reduce得到想要的结果
const allNestedElements = [...document.querySelectorAll( "ol > *" )]
const result = allNestedElements.reduce( ( acc, curr, i ) => {
if(i % 2) acc[acc.length - 1].value = curr.textContent;
else acc.push({ key: curr.textContent })
return acc;
}, [] );
console.log( result );
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
</ol>
假设 dt-dd
成对一致,您可以映射 dt 并使用 nextElementSibling 获取关联的 dd
const dt = document.querySelectorAll( "ol dt" )
const res = [...dt].map(el => {
return {key: el.textContent, value: el.nextElementSibling.textContent}
});
console.log( res );
<ol>
<dt>keyone</dt>
<dd>valone</dd>
<dt>keytwo</dt>
<dd>valtwo</dd>
</ol>