Adding a class to element that has a specific descendant

Question

I have the following code generated by Simple Html Dom Parser:

<a href='....'>
   <div class='test'>...</div>
</a>

How can I add a class to the a element? I presume that I can do this with Jquery?

I only need to add a class to the elements that have a div with class 'test' as descendant.

Yes, and you can do it in pure JS also :) (What's the event that should add the class?) — Roko C. Buljan, Jul 07 '14 at 20:58
on page load, the purpose of it is that later on I can use css on it, but something comes to mind, can I select the element with pure css? — stijn.aerts, Jul 07 '14 at 21:00
No, you cannot target up-the-tree using CSS. http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — Roko C. Buljan, Jul 07 '14 at 21:04

score 4 · Accepted Answer · answered Jul 07 '14 at 20:59

4

Either

$('.test').parent().addClass('whatever');

Or

 $('.test').closest('a').addClass('whatever');

The first if you know the a element is the parent, the second if you just know the a element contains, even multiple levels deep, the .test class

answered Jul 07 '14 at 20:59

dave

57,127
4
69
87

Holt · Answer 2 · 2014-07-07T21:09:06.220

1

You can use the parent method:

$('.test').parent().addClass('my-class');

Or without jQuery:

/* On one element. */
document.querySelector('.test').parentNode.classList.add('my-class') ;
/* On all elements. */
[].forEach.call(document.querySelectorAll('.test'), function (div) {
    div.parentNode.classList.add('my-class');
});

edited Jul 07 '14 at 21:09

answered Jul 07 '14 at 21:01

Holt

34,843
7
82
128

score 0 · Answer 3 · answered Jul 07 '14 at 21:05

0

In vanilla JS, also considering that .test can be a further descendant than a child:

[].forEach.call(document.getElementsByTagName('a'), function(node) {
    if ( node.querySelector('.test') )
        node.classList.add('foo')
})

answered Jul 07 '14 at 21:05

David Hellsing

102,045
43
170
208

score 0 · Answer 4 · answered Jul 07 '14 at 21:07

0

To add class
$('.test').parent().addClass('yourClass');

To remove class
$('.test').parent().removeClass('yourClass');

answered Jul 07 '14 at 21:07

Adding a class to element that has a specific descendant

4 Answers4