2013-06-06 18 views
1

한 줄에 내 jQuery 코드를 건조 방법 -이 내가 달성하기 위해 노력하고 무엇

목표를 "깊은 내부 제품 2" "깊은 내부 제품 3 &"깊은 내적 4 "상대 파란색을 띠는 위의 색상은 청록색을 사용하십시오. 코드 아래

그러나 나는, 별도 대신을 대상으로 단일 샷 다음 이전 &을 대상으로 제가 코드 한 줄에이를 수있는 방법을 알려 싶어, 잘 작동한다.

 var chain = $('ul.initial-list').find('ul').eq(1).find('li').eq(2); 
     chain.prev().addClass('prev'); 
     chain.next().addClass('next'); 

내 코드 -

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Day 3 - 2</title> 
     <style> 
     p { font:14px Arial bold;} 
     .initial-list {font-size: 18px;} 
     li {color:red;} 
     .prev {color: blue;} 
     .next {color: teal;} 
     </style> 
    </head> 
    <body> 
     <p>Target "Deep Inner Product 2" & "Deep Inner Product 4" relative to "Deep Inner Product 3" and color upper one with blue and lower with teal.</p> 
     <ul class="initial-list"> 
      <li>Product 1</li> 
      <li>Product 2</li> 
      <li>Product 3</li> 
      <li>Product 4</li> 
      <li>Product 5</li> 
      <ul> 
       <li>Inner Product 1</li> 
       <li>Inner Product 2</li> 
       <li>Inner Product 3</li> 
       <ul> 
        <li>Deep Inner Product 1</li> 
        <li>Deep Inner Product 2</li> 
        <li>Deep Inner Product 3</li> 
        <li>Deep Inner Product 4</li> 
       </ul> 
       <li>Inner Product 4</li> 
       <li>Inner Product 5</li> 
      </ul> 
      <li>Product 6</li> 
      <li>Product 7</li> 
      <li>Product 8</li> 
     </ul> 
     <script src="jquery.js"></script> 
     <script> 
      var chain = $('ul.initial-list').find('ul').eq(1).find('li').eq(2); 
      chain.prev().addClass('prev'); 
      chain.next().addClass('next'); 
     </script> 
    </body> 
</html> 
+2

ul 안에 ul이 있습니까? – coma

+0

@coma 그러나 우리는 2 깊게 갈 필요가 있습니다!) –

+0

그래, 우물은 ul 안에 직접 가지 마. 그러나 그 외에도 두 가지 다른 작업을 수행 할 때 왜 그것을 한 줄로 만들 수 있습니까? 첫 번째 줄에서 선택자를 조일 수는 있지만 다음 두 줄에 대해 하나의 라이너를 상상하는 것은 어렵습니다 ... 선택한 항목을 클래스와 결합하여 추가 할 수있는 일종의'zip' 기능을 사용하더라도 그리고 각각을 반복하면서 반복하여, 모든 것을 한 줄에 넣지는 않을 것입니다. – JayC

답변

3

당신은 그냥 하나의 라이닝에 대한 관심이 경우, 당신은 할 수 있습니다 : 당신이 더 많은 선명도를 원하는 경우

$('ul.initial-list').find('ul').eq(1).find('li').eq(2).prev().addClass('prev').end().next().addClass('next');' 

, 내가 할 것 :

$("li:contains(Deep Inner Product 3)").prev().addClass('prev').end().next().addClass('next'); 
+0

+1 .. 좋은 코드 리팩터링 :) – swapnesh

관련 문제