innerHtml을 기반으로 한 목록 항목에 클래스 추가

-3

jQuery를 사용하여 span의 innerHtml 값과 일치하는 innerHtml 값을 기반으로 하나의 목록 항목에 클래스를 설정하고 싶습니다.innerHtml을 기반으로 한 목록 항목에 클래스 추가

나는 다음과 같은 코드를 작성 관리해야 : 더 효율적으로 만들어 더 깔끔하게 쓸 수있는 것처럼

if ($(".number").text() === "1") { 
 
     $("li:eq(0)").addClass("selected"); 
 
    } 
 
    if ($(".number").text() === "2") { 
 
     $("li:eq(1)").addClass("selected"); 
 
    } 
 
    if ($(".number").text() === "3") { 
 
     $("li:eq(2)").addClass("selected"); 
 
    }

.selected { 
 
    background-color: #dFd; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="number">2</span> <ul id="menu"> <li>1</li> <li>2</li> <li>3</li> </ul>

는 그러나, 나는 생각합니다. 이 코드를 어떻게 향상시킬 수 있습니까?

출처

2017-09-07 Sameer Ali

텍스트의 int 값을 $ i로 가져 오면 선택기에서 값을 사용할 수 있습니다. 예 : $ ("li : eq ("+ ($ i-1) + ")") –

코드 검토로 마이그레이션 명확성이 부족하여 거부당했습니다. 이것은 잘린 예처럼 보입니다. 당신은 정말로 무엇을 성취하려고합니까? 귀하의 질문에 "... ** innerHtml ** 스팬의 값과 일치"하지만 코드는 실제로 .html()이 아닌 ** .text() ** **를 호출합니다. 또한, "** innerHtml **"을 기반으로 한 목록 항목을 선택하려고하지만 실제로 위치를 기반으로 항목을 선택하고 있다고 가정합니다. 이러한 불일치를 명확히하고이 코드가 무엇인지에 대한 자세한 내용을 추가하십시오 (코드 검토시 [How to Ask] (https://codereview.stackexchange.com/help/how-to-ask) 참조). –

안녕하세요, 요구 사항은 스팬으로 작성된 숫자를 기반으로합니다. 클래스를 추가해야합니다. 번호 1이 쓰여진 경우 첫 번째 목록에 클래스를 추가하고 2가 쓰이지 않으면 두 번째 목록에 클래스를 추가하십시오. 루프에 있어야합니다 :

감사합니다. –

먼저 매개 변수로 클래스 설정시 것을 사용하여 다음 변수로 선택된 값을 받고,에 의해 모든 if의 제거 할 수

: 당신이 원하는 경우를 제한하는 것을

가

var selected = parseInt($(".number").text(), 10) - 1; 
$("li:eq("+selected+")").addClass("selected");

주 값을 1..3으로 변경하려면 클래스를 설정하기 전에 if (selected >= 1 && selected <= 3)이 있어야합니다.

출처

2017-09-07 19:12:24 Antti29

안녕하세요 Antti, 아래 스크립트를 looP에 입력하는 방법을 알려 주시면 큰 도움이 될 것입니다 : var selected = parseInt ($ (". number") .html(), 10) - 1; $ ('. 숫자'). ("수량 선택"). ("li : eq ("+ selected + ")") 추가 클래스 ("selected"); –

@SameerAli : 이전의 내 대답이 마이그레이션 시도에서 손실되었습니다. 최선의 방법은 새로운 질문을하는 것입니다. – Antti29

innerHtml을 기반으로 한 목록 항목에 클래스 추가

답변

관련 문제