正在更改＆＃34; <a>&#34; to &#34;<span>&#34; on screen resize with jQuery

Question

I need to replace an a tag in my nav with a span tag if the browser is resized below a certain width.

Here is my 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>

Here is my 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>');
        });
    } 
});

Right now, everything works on load. If I resize the browser than all a tags are replaced with span tags.

Only the first a tag in the second li tag needs to be replaced with a span tag.

Answer 1

您错误地定位了li，使用了eq()，您可以:first使用a

  

选择孩子ul中的li。我不需要那个。我需要的   前两个改为两个

然后你必须使用直接孩子>来定位第二个a内的li而不是孩子ul

＆＃13;

＆＃13;

$(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>');
    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这样：

$('.menu-main-menu-container ul li:eq(2) a').replaceWith(function() {
    return $('<span>' + $(this).html() + '</span>');
});

Answer 3

这里的问题是你的resize()功能。达到478px的阈值后，将替换正确的a。如果您现在继续调整大小，则下一个a将匹配您的选择器，因为第一个选择器现在是span。

如果您知道您的HTML结构不是动态的并且保持这样，那么您可以使用直接子选择器>：

$('.menu-main-menu-container > ul > li:nth-child(2) > a:first').replaceWith(function() {
     return $('<span>' + $(this).html() + '</span>');
});

Example