javascript - 循环遍历元素以查找特定 ID

Question

可以存在任意数量的元素，具有以下 ID。

<div id="my-div-1">Title 1</div>
<div id="my-div-2">Title 2</div>
<div id="my-div-3">Title 3</div>
<div id="my-div-4">Title 4</div>

我想遍历这些元素以查看 ID 末尾的数字是否与变量中的数字匹配。

到目前为止，这是我认为它不起作用的：

var myNum = 3
var findNum = /[\d]+/;
var findElement = document.getElementById('my-div-' + findNum);
for(i=0; i<findElement; i++) {
    if (myNum = findNum) {
        console.log('Success! myNum = ' + myNum + 
                    ' and findNum = ' + findNum +
                    ' and findElement = ' + findElement);
    }
    else {
        console.log('Fail! myNum = ' + myNum + 
                    ' and findNum = ' + findNum + 
                    ' and findElement = ' + findElement);
    }
}

Answer 1

使用 jQuery，您可以通过以下方式选择它：

var id = 4;
var $element = $("#my-div-" + id);

其中 id 是保存数字的变量。

Answer 2

您可以像这样直接引用元素：

非jQuery方法：

var myNum = 3;
var el = document.getElementById('my-div-' + myNum);
if (!el) {
    alert("Fail");
} else {
    alert("Success");
}

工作示例：http: //jsfiddle.net/EtZxh/4/

jQuery方法：

如果您想使用 jQuery，只需替换为以下内容：

var myNum = 5;
var el = $('#my-div-' + myNum);
if (el.size() == 0) {
    alert("Fail");
} else {
    alert("Success");
}

工作示例：http: //jsfiddle.net/EtZxh/

Answer 3

getElementById不返回多个元素。它只返回一个：

var elem = document.getElementById('my-div-' + number);

if (elem) {
    // elem exists
}

和 jQuery：

if ($('#my-div-' + number).length > 0) {
    // elem exists
}

Answer 4

var myNum = 3;

$('div[id^="my-div-"]').each(function() {
    console.log("hello");
    if(myNum === parseInt($(this).attr('id').replace('my-div-',''), 10)) {
      alert("found => " + $(this).attr('id'));
    } else {
      // do else
    }
});

演示

Answer 5

你可以在 jQuery 中做这样的事情

var num = 3;
$("div[id^='my-div-']").each(function(){
    var id = this.id;
    if(id.slice(-1) === num){
        alert("Success: " +id);
    }else{
        alert("Fail : " +id)
    }
});