Jquery, Json 및 루프를 사용하여 스크립트 내에 배치 된 HTML 콘텐츠에 액세스

Myour

좋아, 그래서 나는 여기서이 코드로 고심하고있다. JSFiddle을 만들었지 만 json이 작동하지 않습니다. 어쨌든 이해하기에 충분한 정보가 있다고 생각합니다.

https://jsfiddle.net/9zor6bcu/3/

JS :

$.getJSON('http://jsonplaceholder.typicode.com/posts', function(data) {
  for (var i = 0; i < 3; i++) {
    var item = data[i];
    var htmls;
    htmls = '<div class="rl_grupo"><h3 class="rl_empresa"> Texto falso </h3><p class="rl_assina"> usuário falso </p><p class="rl_documentos"> 5 falsidades <span>></span></p></div>';
    $(".rl_assina").html(item.title);
    $(".container-fluid").append(htmls);
    console.log(item.title);
  }
});

그래서 다음과 같습니다. JSON 엔드 포인트 (이 예에서는 가짜 API)에서 데이터로 채우려는 html 페이지. 데이터를 반복 할 수 있습니다. 그리고 콘솔에서 올바른 출력을 확인하십시오 (예 item.title:). 그러나 JSON에서 언급 한 줄을 사용하여 HTML에 추가하는 방법을 알 수 없습니다.

게시 된 바이올린에서 실제로 내 모든 Div에서 동일한 코드로 두 번째 줄을 변경했습니다. 내가 뭘 잘못하고 있으며이 코드를 어떻게 개선 할 수 있습니까? 나는 htmls스크립트의 인라인 이 나쁜 것이라고 읽었습니다 .

따라서 누군가가 더 나은 연습을 지적 할 수 있다면 미리 감사드립니다!

Mosh Feu

올바르게 이해했다면 .rl_assina추가하려는 새 요소의 컨텍스트에서을 설정해야합니다 .

$.getJSON('http://jsonplaceholder.typicode.com/posts', function(data) {
  for (var i = 0; i < 3; i++) {
    var item = data[i];
    var htmls;
    htmls = $('<div class="rl_grupo"><h3 class="rl_empresa"> Texto falso </h3><p class="rl_assina"> usuário falso </p><p class="rl_documentos"> 5 falsidades <span>></span></p></div>');
    htmls.find(".rl_assina").html(item.title);
    $(".container-fluid").append(htmls);
    console.log(item.title);
  }
});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Jquery를 사용하여 중첩 된 HTML 태그에 액세스

분류에서Dev

javascript 및 jade에서 foreach 루프를 사용하여 객체의 json 배열에 액세스하는 방법

분류에서Dev

Handlebars 루프 내에서 {{this}}를 사용하여 배열 콘텐츠에 액세스하려면 어떻게해야합니까?

분류에서Dev

for 루프를 사용하여 쉘 스크립트에서 JSON 배열을 반복

분류에서Dev

JS 스크립트를 사용하여 페이지에 동적으로 추가 된 HTML 콘텐츠에 CSS가 적용되지 않음

분류에서Dev

Beaufifulsoup 및 Requests를 사용하여 웹 사이트에서 콘텐츠 스크랩

분류에서Dev

rvest 및 selectorGadget을 사용하여 html 페이지의 특정 콘텐츠에 액세스 할 수 없습니다.

분류에서Dev

$ .html 삽입 된 콘텐츠에 JQuery를 사용하십니까?

분류에서Dev

내부 콘텐츠에 액세스하는 JSON

분류에서Dev

내부 콘텐츠에 액세스하는 JSON

분류에서Dev

jquery를 사용하여 three.js의 셰이더 파일 콘텐츠에 액세스

분류에서Dev

ANT 스크립트를 사용하여 MobileFirst에 앱 빌드 및 배치

분류에서Dev

html 및 css를 사용하여 세 개의 원 아래에 텍스트 배치

분류에서Dev

자바 스크립트를 사용하여 IFrame의 HTML에 액세스

분류에서Dev

jquery를 사용하여 콘텐츠 및 뷰포트 높이에 따라 div의 위치 변경

분류에서Dev

JSON을 사용하여 전송 된 배열에 액세스

분류에서Dev

배치 스크립트를 사용하여 json 파일에서 URL 읽기

분류에서Dev

.json 데이터를 추가 한 후 부트 스트랩을 사용하여 html에서 콘텐츠의 올바른 위치 지정

분류에서Dev

배치 스크립트를 사용하여 여러 명령 프롬프트에서 무한 루프 실행

분류에서Dev

PHP에서 자바 스크립트 배열 콘텐츠 사용

분류에서Dev

getElementById 및 jQuery없이 ID를 사용하여 div에 액세스

분류에서Dev

jQuery를 사용하여 <td>에서 텍스트 상자로 콘텐츠 복사

분류에서Dev

반응 및 후크를 사용하여 중첩 된 JSON에 액세스 할 수 없습니다. 유형 오류

분류에서Dev

CSS를 사용하여 HTML에 콘텐츠 태그로로드 된 SVG 스타일

분류에서Dev

jQuery를 사용하여 JSON에서 데이터에 액세스

분류에서Dev

AngularJS를 사용하여 중첩 된 JSON에 액세스

분류에서Dev

ezdxf를 사용하여 DXF의 INSERT / Block 콘텐츠에 액세스

분류에서Dev

heredoc로 전달 된 Python 스크립트에서 파이프 된 콘텐츠 사용

분류에서Dev

heredoc로 전달 된 Python 스크립트에서 파이프 된 콘텐츠 사용

Related 관련 기사

  1. 1

    Jquery를 사용하여 중첩 된 HTML 태그에 액세스

  2. 2

    javascript 및 jade에서 foreach 루프를 사용하여 객체의 json 배열에 액세스하는 방법

  3. 3

    Handlebars 루프 내에서 {{this}}를 사용하여 배열 콘텐츠에 액세스하려면 어떻게해야합니까?

  4. 4

    for 루프를 사용하여 쉘 스크립트에서 JSON 배열을 반복

  5. 5

    JS 스크립트를 사용하여 페이지에 동적으로 추가 된 HTML 콘텐츠에 CSS가 적용되지 않음

  6. 6

    Beaufifulsoup 및 Requests를 사용하여 웹 사이트에서 콘텐츠 스크랩

  7. 7

    rvest 및 selectorGadget을 사용하여 html 페이지의 특정 콘텐츠에 액세스 할 수 없습니다.

  8. 8

    $ .html 삽입 된 콘텐츠에 JQuery를 사용하십니까?

  9. 9

    내부 콘텐츠에 액세스하는 JSON

  10. 10

    내부 콘텐츠에 액세스하는 JSON

  11. 11

    jquery를 사용하여 three.js의 셰이더 파일 콘텐츠에 액세스

  12. 12

    ANT 스크립트를 사용하여 MobileFirst에 앱 빌드 및 배치

  13. 13

    html 및 css를 사용하여 세 개의 원 아래에 텍스트 배치

  14. 14

    자바 스크립트를 사용하여 IFrame의 HTML에 액세스

  15. 15

    jquery를 사용하여 콘텐츠 및 뷰포트 높이에 따라 div의 위치 변경

  16. 16

    JSON을 사용하여 전송 된 배열에 액세스

  17. 17

    배치 스크립트를 사용하여 json 파일에서 URL 읽기

  18. 18

    .json 데이터를 추가 한 후 부트 스트랩을 사용하여 html에서 콘텐츠의 올바른 위치 지정

  19. 19

    배치 스크립트를 사용하여 여러 명령 프롬프트에서 무한 루프 실행

  20. 20

    PHP에서 자바 스크립트 배열 콘텐츠 사용

  21. 21

    getElementById 및 jQuery없이 ID를 사용하여 div에 액세스

  22. 22

    jQuery를 사용하여 <td>에서 텍스트 상자로 콘텐츠 복사

  23. 23

    반응 및 후크를 사용하여 중첩 된 JSON에 액세스 할 수 없습니다. 유형 오류

  24. 24

    CSS를 사용하여 HTML에 콘텐츠 태그로로드 된 SVG 스타일

  25. 25

    jQuery를 사용하여 JSON에서 데이터에 액세스

  26. 26

    AngularJS를 사용하여 중첩 된 JSON에 액세스

  27. 27

    ezdxf를 사용하여 DXF의 INSERT / Block 콘텐츠에 액세스

  28. 28

    heredoc로 전달 된 Python 스크립트에서 파이프 된 콘텐츠 사용

  29. 29

    heredoc로 전달 된 Python 스크립트에서 파이프 된 콘텐츠 사용

뜨겁다태그

보관