javascript - Loop through elements to find specific ID - Stack Overflow

admin管理员组

文章数量:1278979

Any number of elements can exist, with the following 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>

I would like to loop through those elements to see if the number at the end of the ID matches the number in a variable.

This is what I have so far thought it does not work:

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);
    }
}

Any number of elements can exist, with the following 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>

I would like to loop through those elements to see if the number at the end of the ID matches the number in a variable.

This is what I have so far thought it does not work:

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);
    }
}

• javascript
• jquery

Share Improve this question Follow edited May 15, 2013 at 15:52 Mdd asked May 15, 2013 at 15:41 MddMdd 4,4301212 gold badges4747 silver badges7171 bronze badges 4

• just do var $element = $('#my-div-' + myNum) – Pedro Estrada Commented May 15, 2013 at 15:46
• if (myNum = findNum) { <-- typo should be == and getElementByID only returns a single element, why the looping? – epascarello Commented May 15, 2013 at 15:46
• Why is your question tagged "jquery" when your code doesn't use any? – Blazemonger Commented May 15, 2013 at 15:48
• Maybe I do not need to loop. There are 4 divs as an example, but I'd like to be able to target one even if I don't know how many divs exist. – Mdd Commented May 15, 2013 at 15:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Using jQuery you could select it with the following:

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

Where id is the variable that holds the number.

You can reference the element directly like so:

Non jQuery method:

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

Working example: http://jsfiddle/EtZxh/4/

jQuery Method:

If you want to use jQuery simply replace with the following:

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

Working example: http://jsfiddle/EtZxh/

getElementById doesn't return multiple elements. It returns only one:

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

if (elem) {
    // elem exists
}

And jQuery:

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

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
    }
});

DEMO

You can do something like this in 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)
    }
});

本文标签： javascriptLoop through elements to find specific IDStack Overflow