含<a>格添加类表指定HREF

Question

我有一个情况我需要一个类添加到表，但只有当该表是DIV id为“mydiv”内，有一排在包含<的表格中，其中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“属性包含”选择，以获得与href的myref元素table。试试这个：

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

Working example

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）。然后$.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>