화면에 "<span>"을 "<a>는"jQuery를

Question

와 크기를 변경 나는 브라우저를 특정 width 이하로 크기를 조정할 경우 span 태그로 내 nav에 a 태그를 교체해야합니다.

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

는 지금, 모든 부하에서 작동

여기 내 HTML입니다. 브라우저 크기를 조정하면 모두 a 태그가 span 태그로 바뀝니다.

두 번째 li 태그의 첫 번째 a 태그 만 span 태그로 바꿔야합니다.

Answer 1

여기의 문제는 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

Answer 2

당신이 잘못 li 표적으로하는, eq()를 사용하고 자식 UL에서 리튬을 선택하는 것 a

에 대한 :first를 사용할 수 있습니다. 나는 그것을 필요로하지 않는다. 그때 당신은 단지 2 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>

Answer 3

다음과 같이 입력하십시오 :

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