CODEWITHSUNDEEP
javascriptjquery
user25
user25

Reputation: 3195

getElementsByName: control by last partial name

I can get div elements by id and using only partial name "first"

html

<div id="first.1.end">first.1.end</div>
<div id="first.2.end">first.2.end</div>
<div id="two.3.end">two.3.end</div>
<div id="first.4.end">first.4.end</div>

js

function getElementsByIdStartsWith(selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first");
alert(postedOnes.length);

It counts 3 div elements (alert).

But how can I use end-partial name for search? For example using "end"?

Upvotes: 3

Views: 1237

Answers (3)

sanket joshi
sanket joshi

Reputation: 43

I guess this kind of selection can be possible by using jQuery + regex. Have a look to this

How can I select an element by ID with jQuery using regex?

Might be some what on the line that you want.

Upvotes: 1

fuyushimoya
fuyushimoya

Reputation: 9813

From MDN Attribute selectors:

[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".

[attr$=value] Represents an element with an attribute name of attr and whose value is suffixed by "value".

So you can use [id^="first"] to find elements with id start with "first". and use [id$="end"] to find elements end with "end".

Like 

// This find all div which id ends with "end".
var divs = document.querySelectorAll('div[id$="end"]');

or use jQuery:

$('div[id$="end"]');

Also, you can combine multiple attribute selectors altogether to find a more specific element:

// As we only use querySelector, it find the first div with id starts with "two" and ends with "end".
var divStartAndEnd = document.querySelector('div[id^="two"][id$="end"]');

See demo on jsfiddle

Upvotes: 5

Vikash Pandey
Vikash Pandey

Reputation: 5443

Here I am allowing user to pass all three parameters. suppose user doesn't pass midmatch so it will return only match of first and last.

Below is the working code:

It will return 1 count:

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "2", "end");
alert(postedOnes.length); // now it will show only one in alert.

It will return 3 count:

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "", "end");
alert(postedOnes.length); // now it will show only three in alert.

if you don't want to consider any parameter just pass empty string( "" ) while calling the function.

Hope this will help you :)

Upvotes: 1

Related Questions