如何在Javascript中使用变量通过ID引用DOM元素

How do I refernce a DOM element by ID using a variable in Javascript?

本文关键字：ID 引用 元素 DOM 变量 Javascript      更新时间：2023-09-26

如果我的HTML中有几个div，像这样

<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>

在我的JavaScript中，我如何使用变量引用它们?

// Using Jquery to assign the element to the variable name
$div_1 = $(div_1);
$div_2 = $(div_2);
$div_3 = $(div_3);
// set the CSS for each div
for (i = 1; i <= 3; i++) {
  $div_[i].css({'left': 100 +'px'});   
}

ID只是字符串，所以这样构建它们:

id = 2;
e = document.getElementById('div_' + id);

如果您要存储找到的每个元素，那么您需要一个数组:

divs = [];
divs[1] = $('#div_1');
divs[2] = $('#div_2');

您可以创建包含所有元素的变量，使用.filter()选择具有特定完整id的元素，或以特定数字或字母字符结尾的id 

// all `div` elements having `id` beginning with `"div"`
var divs = $("div[id^=div]");
// select element having `id` ending with `"2"`:`"div_2"` from `divs` collection
var div_2 = divs.filter("[id$=2]");

您可以使用div的"id"属性并获得如下引用:

$div_1 = $("#div_1");
相关文章：