JS 루프 루프 내부

Question

안녕하세요 jquery에 거의 문제가 없습니다. 2006 2008

폭스 바겐 BORA 1.9TDI 1990 1995
아우디 A3 2.0TFSI하지만 내가 달성하고자하는 : 먼저 , 내가 가진 1990

폭스 바겐 BORA 1.9TDI를 폭스 보아 1.9TDI 1991
폭스 보아 1.9TDI 1992
폭스 바래 1.9TDI 1993
폭스 바겐 BORA 1.9TDI 1994
폭스 바겐 BORA 1.9TDI 1995
아우디 A3 2.0TFSI 2006
아우디 A3 2.0TFSI 2007
아우디 A3 2.0TFSI 2008

HTML 코드 :

<div class="make"> 
    <div class="name">VW BORA 1.9TDI</div><div class="start">1990</div><div class="end">1995</div> 
</div> 
<div class="make"> 
    <div class="name">Audi A3 2.0TFSI</div><div class="start">2006</div><div class="end">2008</div> 
</div> 

JS 코드 :

$('div[class="make"]').each(function(index){ 
    var html = ''; 
    var start = $('.start').text(); 
    var end = $('.end').text(); 
    var name = $('.name').text(); 

    for (i=start; i<=end; i++) { 
    html += '<div class="'+i+'">'+name+' '+i+'</div>'; 
    } 
    $("#content").html(html) 
}); 

콘텐츠가 하나 인 클래스 .make가 있으면 괜찮습니다. 그러나 클래스 .make가 여러 콘텐츠로 여러 번 나타나면 모든 콘텐츠가 함께 저장되지만 별도로 있어야합니다.

VW BORA 1.9TDIAudi A3 2.0TFSI 19,902,006
VW BORA 1.9TDIAudi A3 2.0TFSI 19,902,007
VW BORA 1.9TDIAudi A3 2.0TFSI 19,902,008
VW BORA 1.9TDIAudi A3 2.0TFSI이 추천

19902009

Answer 1

이 당신을 위해 작동합니다 : 참고 $(".class")를 돌려 항상 배열을 다음과 같이 - 당신이 문자열을 사용하지 않아도

jQuery를이 DOM 요소와 함께 작동하도록 꽤 좋은 유틸리티를 제공합니다 귀하의 경우에는 index 값을 사용하여 하나씩 액세스해야합니다. 코드에서

$('div[class="make"]').each(function(index){ 
 
    
 
    var html = ''; 
 
    var links = ''; 
 
    var start = parseInt($(this).find(".start").text()); 
 
    var end = parseInt($(this).find(".end").text()); 
 
    var name = $(this).find(".name").text(); 
 
    
 
    for (i=start; i<=end; i++) { 
 
     html += '<div class="'+i+'">'+name+' '+i+'</div>'; 
 
    } 
 
    $("#content").append(html) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="make"> 
 
    <div class="name">VW BORA 1.9TDI</div><div class="start">1990</div><div class="end">1995</div> 
 
</div> 
 
<div class="make"> 
 
    <div class="name">Audi A3 2.0TFSI</div><div class="start">2006</div><div class="end">2008</div> 
 
</div> 
 
<br><br> 
 
<div id="content"></div>

Answer 2

jQuery가 다른 요소를 검색해야하는 위치를 결정하지 않으므로 모든 요소가 그 대상이됩니다. 상위 컨텍스트에서 start, end 및 name을 검색하도록하십시오.

text() 대신 html()을 사용하면 요소 콘텐츠 만 가져올 수 있습니다.

$('div[class="make"]').each(function(index){ 
    var parent = $(this), 
     html = links = '', 
     start = $('.start', parent).html(), 
     end = $('.end', parent).html(), 
     name = $('.name', parent).html(); 

    for(var i = start; i <= end; i++) { 
     html += '<div class="' + i + '">' + name + ' ' + i + '</div>'; 
    } 

    $("#content").html(html) 
}); 

그래야합니다.

Answer 3

(각 반복 내에서 #content의 innerHTML을 변경하려고합니다. 따라서 html이 재정의됨에 유의하십시오.) 루프를 마쳤 으면 #content을 한 번만 업데이트 할 수 있습니다.ES6 버전에서)

:

const makes = document.querySelectorAll('.make'); 
let string = ''; 

Array.from(makes).forEach(div => { 
    const text = div.querySelector('.name').textContent; 
    const end = +div.querySelector('.end').textContent; 
    let start = +div.querySelector('.start').textContent; 

    while(start <= end) { 
     string += `<div class='${start}'>${text} ${start++}</div>\n`; 
    } 
}); 
document.getElementById('content').innerHTML = string; 

올드 자바 스크립트 버전 :

var makes = document.querySelectorAll('.make'); 
var string = ''; 

Array.from(makes).forEach(function(div) { 
    var text = div.querySelector('.name').textContent; 
    var end = +div.querySelector('.end').textContent; 
    var start = +div.querySelector('.start').textContent; 

    while(start <= end) { 
     string += '<div class"' + start + '">' + text + ' ' + (start++) + '</div>\n'; 
    } 
}); 
document.getElementById('content').innerHTML = string; 

Answer 4

첫째, 당신은 현재 활성화 된 내부 요소를 찾으려하지만 글로벌 검색을한다. 단지 현재 범위에서 검색하려면 같은 것을 할 :

var start = $(this).children('.start').text(); // same for .end/.name 

당신은 명시 적으로 같은 번호로 text() 통해 검색 값을 변환 할 것입니다 : 당신이 반복 또한

for (var i = Number(start); i <= Number(end); i++) { 
    // do stuff 
} 

, 정의 변수를 이상을 사용하는 것이 아니라 일반적으로 사용하는 것이 좋습니다.

var $div = $("<div>").text(name).addClass(i); 
$("#content").append($div); 

Answer 5

몇 가지 문제 : 각 사업부에 루핑 것이 아니라,

$('div[class="make"]').each(function(index){ 
    var html = ''; 
    var start = $('.start').text(); 
    var end = $('.end').text(); 
    var name = $('.name').text(); 

• 은 현재 사업부에 기반 검색. 관련 필드를 얻으려면 $(this).find(".start")을 사용해야합니다.
• var start = $('.start').text();이 값은 "1990"이고 1990이 아닐 수 있습니다. parseInt을 사용하여 수동으로 정수로 변환해야합니다.
• $("#content").html(html) 이것은 모든 반복에서 html을 대체합니다. .append()을 사용하거나 html 외부에 VARYAL을 선언 한 다음 .html을 사용하십시오. 루프에서 DOM을 수정하는 것은 나쁜 습관입니다. 변수를 외부로 옮기고 DOM을 한 번 업데이트하는 것이 좋습니다.

Sample JSFiddle