仅删除父级的属性？

Question

我想删除第一个链接的href属性，此时它会删除所有链接的属性。

$("#menu-item-2003 a").removeAttr('href');

这是我的html设置：

<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

Answer 1

如果您只想删除第一个href的{​​{1}}，请使用direct descendent选择器：

a

您当前使用的那个允许选择任何级别的孩子，这是导致问题的原因。

工作演示：

$("#menu-item-2003 > a").removeAttr('href');

$("#menu-item-2003 > a").removeAttr('href');

或者，如果<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li id="menu-item-2003"> <a href="#"> <span class="menu-image-title">Products</span> </a> <ul> <li id="menu-item-2005"> <a href="#"> <img src="icon.svg"> <span class="menu-image-title">Title</span> </a> </li> <li id="menu-item-2006"> <a href="#"> <img src="icon.svg"> <span class="menu-image-title">Title</span> </a> </li> </ul> </li>不是直接后代，您可以使用:first伪类来选择第一个标记：

a

Answer 2

您可以在jquery中使用first()

 $("#menu-item-2003 a").first().removeAttr('href');

Answer 3

使用第一个

• 使用.first()方法

  $("#menu-item-2003 a").removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a").first().removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;

• 先使用:first Selector

  $("#menu-item-2003 a:first").removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a:first").removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;

• 将.filter()与选择器一起使用

  $("#menu-item-2003 a").filter(":first").removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a").filter(":first").removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;

使用eq

• 使用.eq()方法

  $("#menu-item-2003 a").eq(0).removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a").eq(0).removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;

• 先使用:eq() Selector

  $("#menu-item-2003 a:eq(0)").removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a:eq(0)").removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;

• 将.filter()与选择器一起使用

  $("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
  

＆＃13;

＆＃13;

$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
  <a href="#">
    <span class="menu-image-title">Products</span>
  </a>
  <ul>
    <li id="menu-item-2005">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
    <li id="menu-item-2006">
      <a href="#">
        <img src="icon.svg">
        <span class="menu-image-title">Title</span>
      </a>
    </li>
  </ul>
</li>

＆＃13;

＆＃13;

＆＃13;