jquery_jquery에서 객체 객체를 반복하는 방법

WBOY
풀어 주다: 2016-05-16 15:24:42
원래의
1715명이 탐색했습니다.

친구가 객체를 배열로 변환하는 방법을 물었습니다. 왜 변환하고 싶냐고 물었을 때, 그는 js 루프를 사용하여 배열을 탐색할 수 있지만 객체는 탐색할 수 없다고 말했습니다. 실제로 객체는 루프 내에서 탐색될 수도 있습니다. 변환 없이 반복할 수 있습니다! 이는 귀하가 js 또는 jquery의 일부 작업에 능숙하지 않다는 것을 의미합니다! 간략하게 소개하겠습니다!

사례

다음 개체를 살펴보겠습니다.

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}
로그인 후 복사
로그인 후 복사

위의 내용이 백그라운드에서 반환된 키 및 값 개체라고 가정하면(이런 종류의 개체를 자주 접하게 될 것입니다!) 이제 이 콘텐츠를 루프의 테이블에 바인딩해야 합니다. 어떤 친구들은 객체 루프를 작동하는 방법을 모릅니다! 오늘은 두 가지 방법을 소개해드리겠습니다!

방법 1:

$.each를 사용하여 반복하세요!

$.each를 모르신다면 온라인으로 검색해 보시길 권합니다. 물론 "jquery의 $().each와 $.each의 차이점"을 검색할 수도 있습니다. 여기서는 차이점에 대해 자세히 설명하지 않겠습니다. 어떤 친구들은 $().each를 더 많이 사용할 수도 있습니다. 오늘은 $.each를 주로 소개하겠습니다.

$.each()는 배열과 객체를 순회할 수 있습니다. 방법은 다음과 같습니다.

$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});
로그인 후 복사

다음과 같이 이동할 수도 있습니다.

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
로그인 후 복사

출력: 일 둘 셋 넷 다섯
가장 좋은 점은 배열을 탐색할 수 있다는 것입니다.

var obj =data;//上面复制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以输出成绩
console.log(key);//可以输出姓名
});
로그인 후 복사

방법 2:

obj를 탐색하려면 for 루프를 사용하세요

위 객체에 대해 다음과 같이 루프를 작성할 수 있습니다!

for(var i in data){
 console.dir(i);//输出姓名
 console.dir(data[i]);//输出分数
}
로그인 후 복사

모든 사람이 for in 루프에 익숙해야 한다고 생각합니다! 가장 일반적으로 사용되는 for 루프는 for(var i=0;i

또한 다음과 같은 개체가 발견되는 경우:

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}
로그인 후 복사
로그인 후 복사

data.haorooms를 이용하면 98개를 구할 수 있는데, "data.front-end blog"를 사용하면 오류가 발생하므로 한자를 키값으로 사용할 경우에는 data["를 사용해야 합니다. front-end blog"]를 선택하면 방법을 선택하세요. 더 이상 점을 사용하지 마세요.

위 내용은 jquery에서 객체 객체를 반복하는 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!