If a link is inside a parent element, how can i change the parent element's class?

Question

Basically, if my first <td>within my <tr> has an <a> element inside it, I need to change my <tr>. That's as best as I could explain it right now. Example code is below. I thought about using document.links but I don't know if that's the way to go.

Before:

<tr>
    <td>11001122334</td> <!-- Number will be a link once the page loads due to a browser extension -->
    <td>Valid</td>
    <td>Still Valid</td>
</tr>

After:

 <tr class="valid">
    <td><a href="#">11001122334</td></a> <!-- Number will be a link once the page loads due to a browser extension -->
    <td>Valid</td>
    <td>Still Valid</td>
</tr>

@Mark, your answer seems on the right track. Why is it deleted? — isherwood, Apr 13 '15 at 18:24
When do you want the change to happen? On click, or when the extension finishes running? What's the change you wish to see? What would the HTML look like (a) after the extension and (b) after the "change"? And of course, what have you tried? — Paul Roub, Apr 13 '15 at 18:24
@Paul, The change needs to happen after the extension finishes running. The change is that I need a class be applied to the element. I'll edit my post. — Eugene Ross, Apr 13 '15 at 18:27
@EugeneRoss Looks like the DOM will be changed by the Chrome extension. Checkout my answer below with a working example. — Rahul Desai, Apr 13 '15 at 18:53

DrCord · Answer 1 · 2015-04-13T18:32:33.073

1

jQuery('tr td:first-of-type a').parent('tr').addClass('addedClass');

here's a fiddle: https://jsfiddle.net/pqgsmgo1/1/

explanation:

jQuery('tr td:first-of-type a')

selects any a elements that are descendant of the first td in a tr

.parent('tr')

selects the parent of the selected a element

.addClass('addedClass')

adds the "addedClass" class to the selected element(s)

edited Apr 13 '15 at 18:32

answered Apr 13 '15 at 18:28

DrCord

3,917
3
34
47

Could you take the time to explain how/why this works, for the benefit of those trying to learn something? – David Thomas Apr 13 '15 at 18:29
absolutely, let me revise my answer :D – DrCord Apr 13 '15 at 18:30

score 0 · Answer 2 · edited May 23 '17 at 11:57

Check if the DOM is getting changed for a particular element using this solution, then use the selector that DrCord mentioned, but with .closest() function.

Demo:

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

// Observe a specific DOM element:
observeDOM( document.getElementById('dom_element') ,function(){ 
    jQuery('tr td:first-child a').closest('tr').addClass('valid');
});

.valid{
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>    
    <td>1234567899</td> <!-- Added this for test -->
    <td>11001122334</td> <!-- Number will be a link once the page loads due to a browser extension -->
    <td>Valid</td>
    <td>Still Valid</td>
  </tr>
  <tr>    
    <td><a href="#">11001122334</a></td> <!-- Added this for test -->
    <td>11001122334</td> <!-- Number will be a link once the page loads due to a browser extension -->
    <td>Valid</td>
    <td>Still Valid</td>
  </tr>
</table>

If a link is inside a parent element, how can i change the parent element's class?

2 Answers2