10가지 무작위 jQuery 코드 조각

이 게시물에서는 이전 튜토리얼에서 수집한 10개의 임의 jQuery 스니펫을 나열합니다. 내tutorials를 팔로우하는 경우 다음 스니펫에 익숙할 것입니다. 즐겨보세요!

각 요소 순회 및 동일한 작업 수행

이 코드는 클래스가 있는 각 요소를 순회하고 각 요소에 대해 동일한 작업을 수행합니다.

$('.additional-block').each(function() {  
    //Do action  
}); 

이전 형제 자매 수를 세다

때때로 우리는 선택된 요소의 이전 형제를 계산해야 합니다. 여기에 이전 형제를 계산하는 코드가 있습니다.

countPreviousItem = $(this).prevAll('element').length;  

이전 요소의 부모 애니메이션

위의 코드와 마찬가지로 이전 요소의 부모에 애니메이션을 넣을 수 있습니다.

선택한 요소에서 이전 요소의 상위 요소에 애니메이션을 적용하거나 일부 작업을 수행할 수 있습니다.

$(this).parents('element').prev('element').animate({ marginLeft: someFunctin }, 300);  

요소의 인덱스 번호 가져오기

다음 코드를 사용하여 부모로부터 요소의 인덱스 번호를 얻을 수 있습니다.

indexNumber = $('element').index(); 

체크박스 값 가져오기

양식에서 확인란을 사용하는 경우 해당 값을 처리해야 하는 데 많은 시간이 소요됩니다. 다음 코드를 사용하여 확인란이 선택되었는지 확인할 수 있습니다.

checkboxValue = $('checkbox-element').attr('checked');  
//OR  
checkboxValue = $('checkbox-element')[0].checked;  

카운트 요소의 패딩

이 스크립트를 사용하여 현재 요소의 패딩을 계산합니다.

$('element').css('padding-left');  
//OR another padding  
$('element').css('padding-top');  

요소가 존재하는지 확인

선택한 요소에 대해 작업을 수행하기 전에 요소가 존재하는지 확인해야 합니다.

요소가 존재하는지 여부를 확인하려면 아래 코드를 사용하십시오.

if($(element).next('anotherElement').length <= 0) {  
    //element doesn't exists;  
}  else {  
    //element exists;  
} 

추가 요소에 이벤트 함수 삽입

다음 코드를 사용하여 추가한 추가 요소에 이벤트 함수를 삽입합니다.

$('element').live('click', function(){  
    //Do some action  
});  

기능 전환

작업을 토글하려면 다음 간단한 코드를 사용하십시오.

$('element').toggle(  
    function() {  
        //Rotate or do some action  
    },  
    function() {  
        //Rotate back or do some action  
    }  
);  

마우스오버 및 마우스아웃 전환

사용자가 요소 위에 마우스를 올리거나 마우스를 놓을 때 다른 작업을 호출하려면 다음 코드를 사용합니다.

$('element').hover(  
    function() {  
        //When mouseover do some action  
    },  
    function() {  
        //When mouseout do some action  
    }  
);