將類添加到包含<a>指定href的</a> div表中

Question

我有一個情況我需要一個類添加到表，但只有當表是ID為“mydiv”一個div里面並沒有在表中包含<a href=...>元素，其中的href行包含術語“ myref”，包括引號。 在jQuery中這很容易嗎，如果可以，我該怎么做？ 我只是想不出如何在向前和向后引用他人時更改元素。

我嘗試了以下操作，但似乎不起作用（我對jQuery還是比較陌生的，您可能會從下面看到）：

$('.mydiv').find('td').find('a[href]').contains('myref').parent.parent.addClass('myclass')

以下html代碼段模擬了我的情況（我無法更改html，僅添加一些javascript和CSS）：

<div id='mydiv'>
    <a href='blahblah'>Some text</a>
    <table>
        <tbody>
            <tr>
                <td><a href="some href">Some text</a></td>
                <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a></td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td><a href="some href">Some text</a></td>
                <td><a href="javascript:some javascript without match">Some text</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div id='otherdiv'>
    <table>
        <tbody>
            <tr>
                <td><a href="some href">Some text</a></td>
                <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a></td>
            </tr>
        </tbody>
    </table>
</div>

第一個表需要獲取新類，第二個和第三個不需要。

Answer 1

為此，您可以使用has()方法查找包含a所需的table元素以及“屬性包含”選擇器，以使用myref獲取href 。 嘗試這個：

$('#mydiv table').has('a[href*="myref"]').addClass('myclass');

工作實例

Answer 2

搜索名稱為mydiv - $(".mydiv")而不是搜索ID

像這樣更改代碼：)

 $("#mydiv").find("td").find("a[href*='myref']").parents("table").addClass("myClass"); 

 .myClass { background-color: lightblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='mydiv'> <a href='blahblah'>Some text</a> <table> <tbody> <tr> <td><a href="some href">Some text</a></td> <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a></td> </tr> </tbody> </table> <table> <tbody> <tr> <td><a href="some href">Some text</a></td> <td><a href="javascript:some javascript without match">Some text</a></td> </tr> </tbody> </table> </div> <div id='otherdiv'> <table> <tbody> <tr> <td><a href="some href">Some text</a></td> <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a></td> </tr> </tbody> </table> </div> 

Answer 3

您可以在目標td上使用closest()查找其父table （ table ）。 然后$.each()檢查first表中的每個td以及indexOf()來查找href的特定文本。

DEMO

代碼段：

 $(function() { $('#mydiv table:first td').each(function() { if ($(this).find('a').attr('href').indexOf('myref') != -1) $(this).closest("table").addClass('myclass'); }); }) 

 .myclass { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id='mydiv'> <a href='blahblah'>Some text</a> <table> <tbody> <tr> <td><a href="some href">Some text</a> </td> <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a> </td> </tr> </tbody> </table> <table> <tbody> <tr> <td><a href="some href">Some text</a> </td> <td><a href="javascript:some javascript without match">Some text</a> </td> </tr> </tbody> </table> </div> <div id='otherdiv'> <table> <tbody> <tr> <td><a href="some href">Some text</a> </td> <td><a href="javascript:some javascript containing 'myref' in quotes">Some text</a> </td> </tr> </tbody> </table> </div>