javascript - 如果链接没有 href，隐藏父 TR？

Question

我目前有这个:

<table>
    <tbody>
        <tr>
            <td>
            <a href="http://www.google.com">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="http://www.google.com">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="">Visit Website</a>
            </td>
        </tr>
    </tbody>
</table>

我需要一些 javascript 来:
如果<a>没有 href (href="") 然后隐藏包裹它的 TR。

如何使用 javascript 实现此目的？

Answer 1

您可以使用 attribute equals selector 用于获取带有 href="" 的 a 标签，然后通过 closest() 获取 tr

$('a[href=""]').closest('tr').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>
            <a href="http://www.google.com">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="http://www.google.com">Visit Website</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="">Visit Website</a>
            </td>
        </tr>
    </tbody>
</table>

---

或者您可以使用 :has() 或 has() 和 attribute equals selector .

$('tr:has(a[href=""])').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com">Visit Website</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="">Visit Website</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.google.com">Visit Website</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="">Visit Website</a>
      </td>
    </tr>
  </tbody>
</table>

---

仅供引用:

如果你想选择没有href属性的a标签，那么你可以使用 :not() 选择器，例如:

$('a[href=""],a:not(a[href])').closest('tr').hide();