2010-08-02 3 views
5

저는 stackoverflow의 멤버가 제안한 코드를 사용하여 메가 메뉴의 일부로 3 개의 목록 항목을 모두 랩핑하도록 수정했습니다. 코드는 다음과 같습니다. 슬래시 및 .wrapall

var lis = $("ul > li"); 
for(var i = 0; i < ls.length; i+=3) { 
    lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
} 

불행하게도이 사업부에서 3 리의의 '할당량'을 채우기 위해 다음 상위 메뉴에서 하위 리튬의를 잡아 것입니다. 이것은 물론 내 메뉴를 엄청나게 엉망으로 만든다. 예를 들어 여기를 방문하십시오.

아무에게도이 문제를 해결할 수있는 방법이 있습니까?

+1

'ul> li'에서'>'을 제거하면 어떻게됩니까? –

답변

6

당신의 문제가 당신의 선택이다 . sizzle이 오른쪽에서 왼쪽으로 작동하기 때문에 UL element이 직접 부모로 대문자 인 모든 LI elements을 쿼리합니다 (대개 항상 그렇습니다).

그럼, 귀하의 ULs을 분리하십시오.

$('ul').each(function(){ 
    var $lis = $(this).children('li'); 
    for(var i = 0, len = $lis.length; i < len; i+=3){   
    $lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
    } 
}); 
+0

앤디에게 감사드립니다. 사과드립니다.하지만 저는 jQuery를 처음 접했습니다. 당신이 말하는 것 뒤에있는 논리를 이해한다고 생각하지만, unfortuantley 나는 위에 포함 된 데모에서 작업 한 코드 스 니펫을 얻을 수 없습니다 ... 또한 페이지에 3 개의 li를 모두 래핑하지 않을까요? ul.list-content를 ul로 지정하는 것이 더 좋습니까? 조언을 주셔서 감사합니다 – csbourne

+0

hmmn - 죄송합니다. 너에게 효과가 있니? – csbourne

+0

@csbourne : http://www.jsfiddle.net/cbnFX/ 에서 나는 바보짓을하고 있습니다. 적어도 내가 기대하는 바를 수행합니다 :) 그러나 그 플러그인을 사용할 수는 없습니다. – jAndy

0

이 같은 ht 선택기로 클래스 사용을 적용 해 보았습니까?

var lis = $("ul.list-content > li"); 
for(var i = 0; i < lis.length; i+=3) { 
    lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
} 

그러나 당신이 알고하지 않은 경우, 나는 ... 당신이 좋은 ... 아니다 UL에 사업부를 가하고 있습니다 당신은 DOM을 깨고 있음을 경고하는데)