如何在 jquery 中选择从 id 开始

📌 相关文章

📜 如何在 jquery 中选择从 id 开始 - Javascript (1)

📅 最后修改于: 2023-12-03 15:38:18.582000 🧑 作者: Mango

在 jQuery 中选择以某个特定字符串开头的 id 很容易。可以使用 Attribute Starts With Selector（属性开始选择器）和 id 选择器的组合来完成该任务。

使用方法

属性开始选择器使用方括号以固定语法 [attribute^=value] 来指定要选择的属性，其中 attribute 是属性名称，value 是以该属性值开头的字符串。

例如，要选择以“example”开头的所有 id，可以使用以下选择器：

$('[id^="example"]');

接下来，使用 id 选择器 # 来筛选从当前 DOM 选中的元素中所有以“example”开头的 id 元素：

$('[id^="example"]').find('[id*="example"]');

这将返回具有 id 属性值以“example”开头的所有 DOM 元素，不包括具有以“example”开头的其他属性的元素。

示例

以下示例使用了两个 DOM 元素，它们的 id 属性分别是“exampleId1”和“exampleId2”。使用属性开始选择器和 id 选择器的组合找到以“exampleId”开头的元素，并对其进行样式更改：

<!DOCTYPE html>
<html>
<head>
	<title>Selecting elements starting with certain Ids jQuery</title>
</head>
<body>
	<div id="exampleId1">Example element 1</div>
	<div id="exampleId2">Example element 2</div>
	<button>Apply styles</button>
  
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$('button').click(function(){
			$('[id^="exampleId"]').css({
				'color' : 'red',
				'font-size' : '20px'
			});
		});
	</script>
</body>
</html>

这将在单击页面上的按钮时将样式应用于以“exampleId”开头的所有元素。

结论

在处理大型文档并需要使用 DOM 中的元素进行操作的情况下，选择特定类型的 DOM 元素可以非常有用。使用属性开始选择器和 id 选择器的组合，可以快速选择以某个特定字符串开头的 DOM 元素，使您可以轻松地对其进行操作。