2011-08-30 4 views
2
$('#AddMoreErrors,#AddMoreMime,#AddMoreRemote').live('click',function(){ 
    var newRow = $(this).closest('tr'); 
    $(this).closest('tr').after('<tr class="'+newRow.attr('class')+'">'+newRow.html()+'</tr>').find('span').removeAttr('id').addClass('removetr').html('Del');     
}); 

위의 jquery 코드는 다음과 같습니다. 누군가가 "추가"를 클릭하면 가장 근접한 tr을 찾아서 tr에 복제하고 첫 번째 것에 추가합니다. 그런 다음 span을 모두 찾은 다음 id을 제거하고 새 class을 추가하고 텍스트를 변경합니다.누군가이 jQuery 코드를 설명하는 데 도움을 줄 수 있습니까?

지금 무슨 일이 나에게 내가 spanremoveAttr을 할 수있는 알고 find('span').removeAttr('id').addClass('removetr').html('Del');

했다 놀라게하지만 어떻게 addClasshtmlspan에 적용 되었나요?

+3

잠깐 ... 그래서 당신은 ** 당신이 쓰고있는 ** 전혀 몰랐습니다 **? – BoltClock

+1

나는 다른 아이디어를 가지고 있었지만 이것이 효과가있을 것이라고 생각했다.하지만 처음 촬영했을 때 놀랐다. – aWebDeveloper

+0

오, 괜찮아. – BoltClock

답변

1

jQuery를 그것이 수행되는 각 작업 후 소자의 객체를 리턴하고, 실행 순서는 왼쪽에서 오른쪽이다. 따라서 해당 .removeAttr('id')이 span에 있고 해당 span 객체가 반환됩니다. 마찬가지로 .addClass('removetr').html('Del');이 수행됩니다.

0

이것을 메소드 체인이라고합니다. 각각의 jQuery 메소드 (removeAttr(), addClass(), html(val))는 자신이 속한 jQuery 오브젝트를 리턴합니다. 즉 점 표기법을 사용하여 추가 방법을 호출 할 수 있습니다.

find('span').removeAttr('id').addClass('removetr').html('Del'); 

이 같은 의미 :

+0

내가 왜 그것을 사용했는지 체인을 알고 있지만 어떻게 3이 모두 span에 적용되었는지 – aWebDeveloper

+0

@WebDeveloper Quentin이 내가 [그들의 ​​답변] (http://stackoverflow.com/questions/7239190/can-some에서했던 것보다 더 잘 설명했다. -one-explain-the-below-jquery-code/7239221 # 7239221) – Phil

1

대부분의 jQuery 방법은 그래서 this 반환 당신이 요구하는지 모르겠어요

var foo = find('span'); 
foo.removeAttr('id'); 
foo.addClass('removetr') 
foo.html('Del'); 
+0

무슨 뜻입니까? 나는 그들이 둘 다 똑같다고 이해했다. (urs & mine). 하지만 나에게 몇 가지 광석 정보를 줄 수 있겠 니? – aWebDeveloper

+1

'foo.removeAttr ('id')'의 반환 값은'foo' – Quentin

+0

오, 그렇다면 모든 메소드가 foo – aWebDeveloper

1

,하지만 당신이 원하는 경우 이유를 알고 모든 jQuery 함수가 "this"를 반환하기 때문에 jQuery 명령을 차례로 연결할 수 있습니다. IIFEs 작업을 할 때 당신은 쉽게 같은 작업을 수행 할 수 있습니다

function doSth() { 
    // Some logic 
    return this; 
} 

실제로 각 메서드 호출 후 객체를 반환하고 앞에서 메서드 호출 동일한 개체에 작업을 계속한다을 어떻게됩니까.

$("#sel").method().method2().method3(); 

정확히

var sel = $("sel"); 
sel.method(); 
sel.method2(); 
sel.method3(); 

만이 짧은 있다고, 더 좋은보고 할 경우에 대비하여 변수를 당신이하지 저장할 필요가 없습니다를 작성과 동일 함을 의미

나중에 다시 그것을 필요로한다.

그런 식으로 하나의 함수를 작성하고 함수가 실행 된 후에는 항상 완전한 jQuery 함수를 사용할 수 있습니다.

그래서 같은 오브젝트에서 세 가지 메소드가 모두 실행되는 이유를 확인할 수 있습니다.이 방식은 체인이 작동하는 방식입니다. "$"를 호출하여 새 객체를 만듭니다. 그런 다음 모든 메소드가 해당 객체에서 실행됩니다.

물론 함수가 실제로 값을 반환하지 않는 한. 그럼,이 작동하지 않습니다.

function getSth() { 
    return "value"; 
} 
관련 문제