Question

基本上，如果我的<td>中的第一个<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>

Answer 1

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

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

说明：

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

选择a

中第一个td后代的所有tr个元素

.parent('tr')

选择所选a元素的父级

.addClass('addedClass')

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

Answer 2

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

<强>演示：

＆＃13;

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');
});

＆＃13;

.valid{
  background: yellow;
}

＆＃13;

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

＆＃13;

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

2 个答案: