jquery - 使用 jQuery 在屏幕调整大小时将 "<a>"更改为 "<span>"

Question

如果浏览器的大小低于某个 宽度，我需要用 span 标记替换 nav 中的 a 标记。

这是我的 HTML:

<div class="menu-main-menu-container">
    <ul>
        <li><a href="">one</a></li>
        <li>
            <a href="">two</a>
            <ul>
                <li><a href="">one</a></li>
                <li><a href="">two</a></li>
            </ul>  
        </li>
        <li>three</li>
    </ul>
</div>

这是我的 jQuery:

$( window ).on('load resize', function() {
    if ($(window).width() < 478) {
        $('.menu-main-menu-container ul li:nth-child(2) a').first().replaceWith(function() {
            return $('<span>' + $(this).html() + '</span>');
        });
    } 
});

现在，一切都在负载上运行。如果我调整浏览器的大小，所有 a 标签都将替换为 span 标签。

只有第二个li 标签中的第一个a 标签需要替换为span 标签。

Answer 1

您的 li 定位不正确，请使用 eq() 并且您可以将 :first 用于 a

That's selecting the li in the child ul. I don't need that. I need the first two to changed to two

那么你必须使用直接子 > 来定位第二个 li 中的 a 而不是子 ul

$(window).on('load resize', function() {
  if ($(window).width() < 478) {
    $('.menu-main-menu-container ul > li:eq(1) >  a:first').replaceWith(function() {
      return $('<span>' + $(this).html() + '</span>');
    });
  }
});

span {
  background: red;
  display: block
}
a {
  background: green;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-main-menu-container">
  <ul>
    <li><a href="">one</a>
    </li>
    <li>
      <a href="">two</a>
      <ul>
        <li><a href="">one</a>
        </li>
        <li><a href="">two</a>
        </li>
      </ul>
    </li>
    <li>three</li>
  </ul>
</div>