javascript 找到页面上的所有标题，使用他们的ID锚定到他们的位置并使用选项填充下拉列表

Posted 2021-05-03

  // Dynamic hero dropdown & anchor links
	// -------------------------------------

	// fetch all h2's on the page & create an array.
	const items = Array.from( document.querySelectorAll( 'h2' ) );

	// Take our items array and first store the id, then trim to only contain our unique ID.
	const itemIds = items
		.map( itemId => itemId.id )
		.map( itemId => itemId.substr(itemId.length - 13) );

	// Again, take the items array but this time only keep the heading content.
	const headings = items
		.map( heading => heading.innerHTML );

	const dataArray = new Array();

	// Here we want to combine both arrays to produce our output.
	// We map over the headings array and then later include our itemIds array.
	const combine = headings.map( ( value, index ) => {
		// Include our itemIds array.
		const headingId = itemIds[index];
		// Create a variable which contains the markup for our dropdown.
		const output = `
			<option value="${home_url}/#${headingId}">
				${value}
			</option>
		`;

		// At the end of the function, return our HTML markup.
		return output;
	}).join('');

	const dropdown = document.getElementsByClassName('hero-sub-dropdown');

	dropdown.innerHTML = combine;