CODEWITHSUNDEEP
jqueryfilterselection
frequent
frequent

Reputation: 28523

How to select only some classes of an element

I have a table header cell, which has both formatting and functional classes, like so:

 <th class="persistent optional some-other-classes">

I want to copy persistent and optional to all following table cells but having a hard time with selecting the appropriate classes

I'm trying this, but it doesn't get me anywhere...

 $('th, TH').filter( '.persistent, .optional')

Is there a way to grab only these two classes without referencing some-other-class by name?

Thanks for help!

EDIT: more info
Items will have more than 3 classes. I only want to copy/paste the persistent and optional classes, which handle table appearance, and leave the formatting classes

It should be something like:

 $('th, TH').attr(class).filter( '.persistent, .optional' )

which doesn't work of course.

Upvotes: 0

Views: 485

Answers (6)

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41767

The following will match th elements that have either class:

$('th.persistent, th.optional');

or to match th elements that have both:

$('th.persistent.optional');

Or, to get elements that have a class of only persistent or only optional or only both:

$('th.persistent, th.optional').filter(function() {
  var classes = this.className.split(/\s+/);
  return classes.length == 1 || (classes.length == 2 && $(this).is('.persistent.optional');
};

Update

Okay, I think I understand your requirement now - if a table header is .optional all td elements in the column should also have the .optional class, similarly for .persistent:

$('th.persistent, th.optional').each(function() {
  var th = $(this);
  var col = th.parent().children().index(th);
  th.closest('table').find('td').each(function() {
    var td = $(this);
    if (td.parent().children().index(td) === col) {
      if (th.is('.persistent')) td.addClass('persistent');
      if (th.is('.optional')) td.addClass('optional');
    }
  });
});

Upvotes: 1

frequent
frequent

Reputation: 28523

After a lot of meddling, this is my solution that works:

    var classes = "",

    allClasses = th.attr("class").split(/\s+/);

    for (var j = 0; j < allClasses.length; j++) {
          if (allClasses[j] === 'persistent' || allClasses[j] === 'optional' ) {
             classes = classes+" "+allClasses[j]
             }
    }

    console.log(classes)  
    // returns "persistent optional" or "persistent" or "optional"
    // leaves away all other classes

If there is an easier way to filter out these two classes, I would be happy to give the answer to someone.

THANKS for all your efforts and sorry for not telling exactly what I needed.

Upvotes: 0

Krzysztof
Krzysztof

Reputation: 16150

To select only elements with class persistent and optional, try this:

$('th[class="persistent optional"], th[class="optional persistent"]')

It won't work it there will be additional spaces. If you need to handle such cases pass function to the filter:

$('th').filter(function(){ 
    return this.className.match(/^\s*(persistent\s+optional|optional\s+persistent)\s*$/);
})

Upvotes: 0

Pavan
Pavan

Reputation: 4339

I have created a jsfiddle to select items that contains only specified classes.

http://jsfiddle.net/hYgqS/

here is the sample html

<div class="a1 a2 b">
1
</div>
<div class="a1 a2">
2
</div>

here is the JS code

$('div.a1.a2').filter(function(){
return $(this).attr('class').split(' ').length ==2
}).text("this one");

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146660

You can use the addClass() method to assign class names to a set of previously matched elements:

$("th").addClass("persistent optional")

Upvotes: 0

Viruzzo
Viruzzo

Reputation: 3025

For intersection you need filter('.persistent.optional'), no space no commas.

Upvotes: 0

Related Questions