CODEWITHSUNDEEP
jquery
Navneet Saini
Navneet Saini

Reputation: 944

jQuery:How to select elements with particular class here?

HTML goes like this:

<span class="someClass position1" >span1</span>
<span class="someClass" >span2</span>
<span class="someClass" >span3</span>
<span class="someClass position2" >span4</span>
<span class="someClass" >span5</span>
<span class="someClass position4" >span6</span>
<span class="someClass position10" >span7</span>
<span class="someClass" >span8</span>
<span class="someClass position12" >span9</span>

Now, using jQuery, how will I change the backgroundColor of only those elements which have the class position+SomeINTEGER?

I want to select all the elements with the class poistion+TheRespectiveInteger

Upvotes: 3

Views: 1457

Answers (8)

Sanjeev Rai
Sanjeev Rai

Reputation: 6992

Try the following selector:

$("span:regex(class, (\s|^)position[0-9]+(\s|$))").css("background-color", "Green");

For more reference, see Write a jquery selector to select a class with a certain pattern

For regex selector, you need to write following line of code:

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
    validLabels = /^(data|css):/,
    attr = {
        method: matchParams[0].match(validLabels) ? 
                    matchParams[0].split(':')[0] : 'attr',
        property: matchParams.shift().replace(validLabels,'')
    },
    regexFlags = 'ig',
    regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

this wonderfull implementation given by James Padolsey.

see working example : http://jsfiddle.net/Q7fTW/16/

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41840

Try this: 

$('.someClass').filter(function () {
    return /(\s|^)position[0-9]+(\s|$)/.test(this.className);
}).css('background-color', 'silver');

Working Fiddle

You can just modify the regex to get the perfect result :)

Upvotes: 4

sangram parmar
sangram parmar

Reputation: 8736

try this

it's working

    $('[class^="someClass position"]').css({ 'background-color': 'red' })
    //Selects elements that have the specified attribute with a value beginning exactly with a given string.

or

    $('[class*="position"]').css({ 'background-color': 'red' })
    //Selects elements that have the specified attribute with a value containing the a given substring.

or

    $('[class^="someClass"][class*=" position"]').css({ 'background-color': 'red' })
    //Matches elements that match all of the specified attribute filters.

refrence

http://api.jquery.com/category/selectors/attribute-selectors/

Upvotes: 0

jcsanyi
jcsanyi

Reputation: 8174

I'm assuming you want to change the background of all the elements that have a class matching that pattern - not just for one particular number.

There is probably a hacky way to do this by treating class as just another attribute and doing a partial match against the value.

However a better solution is to add another class that you can select on. Perhaps have whatever is adding the positionX classes also add a positioned class at the same time.

Upvotes: 6

luiges90
luiges90

Reputation: 4608

$(".someClass").each(function(){
    var classes = $(this).attr('class').split(/\s+/);
    for (var i = 0; i < classes.length; ++i)
    {
        if (classes[i].match(/^position\d+$/i)) {
            $(this).css('background-color', 'red');
        }
    }
});

For any elements containing a class that is positionN where N is any integer as well as someClass class, if you must do this.

http://jsfiddle.net/ysUMs/2/

Upvotes: 2

SadhanaP
SadhanaP

Reputation: 37

If you know the value of SomeINTEGER then use :

  $(".position" + SomeINTEGER).css('backgroundColor','red');

else // This suggests starting from "position"

 $('span[class^=position]).css('backgroundColor','red');

Upvotes: -2

Mandeep Jain
Mandeep Jain

Reputation: 2674

$(".position" + someINTEGER).css('backgroundColor','your color');

EDIT:

The way you asked the question is quite confusing.

To identify the elements which have a class position + Integer, you need to specify another class to them for identification

<span class="someClass integerclass position1" >span1</span>
<span class="someClass integerclass position2" >span4</span>

$(".integerclass).css('backgroundColor','your color');

Upvotes: 0

Nil&#39;z
Nil&#39;z

Reputation: 7475

You can also try this:

<script type="text/javascript">
    $(function(){
        if( $(".someClass").hasClass(".position"+NUMBER) ){
            $(this).css({ 'backgroundColor','your color' });
        } 
    });
</script>

Upvotes: 0

Related Questions