jQuery : 더 짧고 우아하게 만들 수있는 방법이 있습니까?

다음과 같은 코드가 있습니다.jQuery : 더 짧고 우아하게 만들 수있는 방법이 있습니까?

<div id="wrapper"> 
     <img id="first" class="images" src="img/nike.jpg" /> 
     <img id ="second" class = "images" src="img/golden.jpg" /> 
     <img id = "third" class ="images" src ="img/a.jpg" /> 
     <img id = "fourth" class="images" src="img/God__s_Canvas_by_Delacorr.jpg" /> 
    </div>

동적으로 <a name = n>를 사용하여 각 img를 래핑합니다. 그래서 내 해결 방법은 다음과 같습니다.

$(".images").wrap('<a></a>') 
$("#wrapper a").each(function(n) { 
      $(this).attr('name', n); 
     })

2 개의 명령문을 1 개의 명령문으로 연결할 수 있습니까? 나는 jQuery가 특히 우아한 체인을 사용하므로 분명히 가능하다고 생각합니다. 나는 아직 어떻게 해야할지 모르겠다.

출처

2009-05-06 Keira Nighly

Man ... 저는 jQuery의 연결 기능이 마음에 들었습니다. 솔루션이 모든 정답뿐만 아니라 완벽하고 합법적이고 좋은 솔루션이기 때문에 어떤 것이 가장 좋은지 알기는 어렵습니다. 나는 Dan에게 우아함 상을 줄 것이지만 현재의 세 가지 솔루션 중 어느 것이 BEST인지는 밝히지 않습니다. 우아한 느낌이 항상 더 나은 공연이라는 의미는 아닙니다. 나는 Dan 's가 작업을 성취하기 위해 최소한의 루핑을 수행해야하기 때문에 최고의 2 가지를 수행 할 것이라고 말하고 싶다. 좋은 친구들. ;-) – KyleFarris

이것은 #wrapper 외부에서 .images를 감싸지는 않지만 정확히 동일하기 때문에 동일하지는 않습니다. 루프에서를 생성하고 즉시 속성을 적용합니다.

$('#wrapper img').each(function(n) { 
    $(this).wrap($('<a></a>').attr('name', n)); 
}

출처

2009-05-06 03:05:02

감사합니다! 귀하의 솔루션은 훌륭하게 작동합니다. –

나는 그것이 가능하다는 것을 몰랐다. jQuery 바위! +1 –

이 작동 할 수 있습니다 ... 당신이 객체의 두 개의 컬렉션을 참조하고 있기 때문에, 당신은 할 수 있다고 생각하지 않습니다

$(".images").wrap('<a></a>').parent().each(function(n) {$(this).attr('name', n);});

출처

2009-05-06 03:05:17

감사합니다. 나는 부모를 생각하지 않았다(). 나는 그것이 단지이 단순한 것이라고 결코 생각하지 않았다. –

좋은 답변입니다. +1 –

. $()는 일치하는 항목의 배열을 반환합니다. 첫 번째 구현의 경우 '이미지'클래스로 각 이미지를 가져 와서 앵커 태그로 래핑합니다. 두 번째 구현에서는 'wrapper'div에있는 모든 앵커 태그 요소를 가져오고 name 속성을 적용합니다. 이것들은 분명히 다른 두 개의 모음입니다. 두 번째 모음은 첫 번째 문장을 완료 할 때까지 사용할 수 없습니다.

이제 위의 Dan의 구현이 트릭을 수행 할 수 있습니다. 당신이 찾고 있던 사슬은 아니지만 돈으로 보입니다.

출처

2009-05-06 03:10:53

jQuery : 더 짧고 우아하게 만들 수있는 방법이 있습니까?

답변

관련 문제