jQuery，使用 for 循环来操作元素？ （添加/删除类等）

Question

function roomGen(minimum, maximum, interv) {
    for (var i = minimum; i < maximum; i += interv) {   
        room = "#room" + i;
        $(room).addClass('currentRoom');
        console.log(room);
    }
}
roomGen(1,20,1);

大家好。我正在尝试通过特定的 ids 同时向多个 div 动态添加类。我有编号为 1-100 的 id 为 #room.. 的 div。

我期待这个功能相当于打字：

$('#room1').addClass('currentRoom');
$('#room2').addClass('currentRoom');
etc...

但是它并没有给我我所希望的。 console.log 方法正在返回我所期望的（#room1、#room2），并且我没有收到任何关于语法的 JS/jQuery 错误或 elem 未被识别。基本上，当我触发roomGen() 函数时……实际上什么都没有发生。

我尝试过搭配引号 (room = "'"+"#room"+i+"'")，我尝试过使用 i.toString()，我还尝试过将房间添加到数组并访问它们。这些都不适合我。

知道这是否可行吗？似乎应该如此。

Answer 1

您的代码正在运行，请务必在 $(document).ready() 中添加您的脚本，或者在目标 DOM 元素之后添加脚本。

$(document).ready(function() {
	function roomGen(minimum, maximum, interv) {
	  for (var i = minimum; i < maximum; i += interv) {
		room = "#room" + i;
		$(room).addClass('currentRoom');
		console.log(room);
	  }
	}

	// generate stub data for test
	for (var i = 0; i < 100; i += 1) { 
	  $("#rooms").append('<div id="room'+i+'">room'+i+'</div>');
	}

	roomGen(1, 20, 2);
});

.currentRoom{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rooms"></div>

Answer 2

jQuery 对 集合 元素进行操作。 Select 和 filter 正确的元素，你根本不需要循环。

$("*[id^=room]").filter(function () {
    return 0 + this.id.replace("room", "") <= 100;
}).addClass('currentRoom');