"更改为 ""-6ren"> "更改为 ""-如果浏览器的大小低于某个 宽度,我需要用 span 标记替换 nav 中的 a 标记。 这是我的 HTML: one two -6ren">
gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:20:52 24 4
gpt4 key购买 nike

如果浏览器的大小低于某个 宽度,我需要用 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 标签。

最佳答案

您的 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>

24 4 0