如果链接在父元素内，我如何更改父元素的类？答案

【问题标题】：If a link is inside a parent element, how can i change the parent element's class?如果链接在父元素内，我如何更改父元素的类？
【发布时间】：2015-04-14 02:51:35
【问题描述】：

基本上，如果我的第一个<td>within 我的<tr> 里面有一个<a> 元素，我需要更改我的<tr>。这是我现在能解释的最好的了。示例代码如下。我考虑过使用document.links，但我不知道这是否可行。

之前：

<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>

之后：

 <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>

【问题讨论】：

是的，对不起，可以使用jQuery。
你的意思是如果里面有一个标签？
是的，存在于中
@Mark，你的答案似乎在正确的轨道上。为什么会被删除？
您希望何时进行更改？单击时，或扩展程序完成运行时？你希望看到什么样的改变？ HTML 会是什么样子（a）在扩展之后和（b）在“更改”之后？当然，您尝试过什么？

【解决方案1】：

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

这是一个小提琴：https://jsfiddle.net/pqgsmgo1/1/

解释：

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

选择tr 中第一个td 的后代的任何a 元素

.parent('tr')

选择所选a元素的父元素

.addClass('addedClass')

将“ addedClass”类添加到所选元素

【讨论】：

您能否花时间解释一下它是如何/为什么起作用的，以帮助那些试图学习一些东西的人？
绝对，让我修改我的答案：D

【解决方案2】：

使用 this solution 检查特定元素的 DOM 是否发生变化，然后使用 DrCord 提到的选择器，但使用 .closest() 函数。

演示：

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>

【讨论】：