Jquery .each() function

-2

class = required 인 각 요소에 대해 onclick Link에서 test() 메소드를 활성화 한 후에 invalidClass를 추가하려고하지만 작동하지 않습니다. 객체를 참조하는 방법?Jquery .each() function

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
.required {background-color:red;} 
.invalid {background-color:blue !important;} 
</style> 

<script> 
function test(){ 
$('.required').each(function(i,obj) { 
$(obj).addClass("invalid"); 
}); 
} 
</script> 

</head> 
<body> 
<form method="get"> 
<input type="text" class="required" name="var"/> 
<input type="text" class="required" name="var2"/> 
<input type="submit" value="Submit"/> 
</form> 

<a onclick="test()" href="#">Link</a> 

</body> 
<html>

출처

2013-07-23 Sheryf

@Jack이 기능은 DOM이 준비되기 전에 정의되지만 이후에는 실행되지 않습니다. 문제 없습니다. – Izkata

이 작업을 수행하려면 jQuery를 포함해야합니다. – Musa

@Izkata 귀하의 권리는 그가 전화를 걸었다는 사실을 알지 못했을 때입니다. – Jack

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
.required {background-color:red;} 
.invalid {background-color:blue !important;} 
</style> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $("#btn").click(function() {  
     $('.required').addClass("invalid"); 
     return false; 
    }); 
}); 
</script>  
</head> 
<body> 
<form method="get"> 
<input type="text" class="required" name="var"/> 
<input type="text" class="required" name="var2"/> 
<input type="submit" value="Submit"/> 
</form> 
<a id="btn" href="#">Link</a> 
</body> 
<html>

루프 필요 없음을.
jquery를 사용할 때 함수 호출이 필요 없습니다.
JQuery가 포함됩니다.

출처

2013-07-23 14:00:57 randomizer

내가 jquery를 포함해야할지 모르겠다. 일부 기능은 wihtout에서 작동하고 있었다. 감사합니다 – Sheryf

당신은 Javascript와 JQuery를 결합했습니다. Javascript와 JQuery 중 하나를 사용하는 것이 더 좋으며 JQuery를 사용하기 때문에 모든 경우에 사용하는 것이 더 좋습니다. – randomizer

질문이 하나 더 있습니다. 각 입력 요소의 값을 확인하고 싶습니다. {$ (this)} .value == null) { $ ('. 필수') 각 함수() { if ($ this) .value == ""|| $ 이) .addClass ("invalid"); \t} \t 그렇지 않으면 true 반환; }); }' – Sheryf

그냥이 작업을 수행 할 수 있습니다 : 여기에 각 loop의

$('.required').addClass("invalid");

필요가 없습니다 는 코드를 프로그래머.

출처

2013-07-23 13:57:01

의 예와 관련하여 분명히 문제가 있습니다. 각 요소 및 다음 변경 스타일에 대해 if를 사용하고 싶습니다. – Sheryf

여기에 각 루프를 사용할 필요가 없습니다. 이것 [Fiddle] (http://jsfiddle.net/G484X/) 또는 this [fidddle] (http://jsfiddle.net/G484X/1/)를보십시오.이 작업을 수행하려면 jQuery 파일을 코드에 포함 시키십시오. –

이 시도 : jQuery로

function test() { 
    $('.required').each(function() { 
    $(this).addClass("invalid"); 
    }); 
}

출처

2013-07-23 13:58:29 grandinero

여기에 게시하기 전에 시도했습니다. 나던데. – Sheryf

캐치 클릭 이벤트 : 사용자가 페이지에서 JQuery와 포함하지 않는

$('a').on('click', function(e) { 
    e.preventDefault(); 
    $('.required').addClass("invalid"); 
});

출처

2013-07-23 13:59:43 MiRaIT

합니다. 헤더에 넣고 :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

출처

2013-07-23 13:59:52 Izkata

여기에는 각 루프가 필요하지 않습니다. 나는 이런 식으로 일을하는 것이 좋습니다

은 (.required의 클릭을 듣고, 새로운 클래스를 추가) :

$('.required').on("click", function() 
{ 
    $(this).addClass("invalid"); 
});

출처

2013-07-23 14:02:12 Jonast92

당신은 당신이 jQuery library을 포함 할 때 코드가 잘 작동입니다. 그래서 이것이 당신 문제입니다.

그래도 코드 개선을 제안합니다.

</body> 태그 앞에 jQuery를 포함하고 스크립트를 작성하십시오. 이것은 best practice입니다.

jQuery를 사용하고 있으므로 onclick 메소드가 필요하지 않습니다.

루프 내에서 루프하지 않도록하십시오.

<a> 태그가 기본 동작을 수행하도록 허용하지 않았는지 확인하십시오.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
    .required {background-color:red;} 
    .invalid {background-color:blue !important;} 
</style> 

</head> 
<body> 
    <form method="get"> 
     <input type="text" class="required" name="var"/> 
     <input type="text" class="required" name="var2"/> 
     <input type="submit" value="Submit"/> 
    </form> 
    <a id="btn" href="#">Link</a> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(function() { 

    $("#btn").click(function(e) { 
     e.preventDefault();  
     $('.required').addClass("invalid"); 
    }); 

}); 
</script> 

</body> 
<html>

출처

2013-07-23 14:08:28

Jquery .each() function

답변

관련 문제