Чтобы создать цикл для создания нескольких элементов?

Question

Я показываю данные из таблицы Google Fusion на своем веб-сайте. Пока я могу отображать данные как теги p.

<p>Hotel Name</p> 
<p>www.hotelwebsite.com</p> 
<p>Hotel description</p> 
<p>http://www.hotelwebsite.com/hotelimage.jpg</p> 

Но я хотел бы изменить типы элементов для каждого элемента.

<h2>Hotel Name</h2> 
<a href="http://www.hotelwebsite.com">www.hotelwebsite.com</a> 
<p>Hotel description</p> 
<img src="http://www.hotelwebsite.com/hotelimage.jpg"/> 

Возможно ли сохранить цикл for, но создать разные элементы, которые я могу по-разному стилизовать?

htmlTable.appendChild(tableRow); 
for (var i = 0; i < resp.rows.length; i++) { 
    var tableRow = document.createElement('div'); 

    for (var j = 0; j < resp.rows[i].length; j++) { 
    var tableData = document.createElement('p'); 
    var content = document.createTextNode(resp.rows[i][j]); 
    tableData.appendChild(content); 
    tableRow.appendChild(tableData); 
    } 

JSFiddle: http://jsfiddle.net/alsjohnstone/LqmgcLa6/8/

Answer 1

Каждая строка имеет 4 столбцов (имя, URL сайта, описание, изображение URL), а не через увеличивающиеся каждую ячейку, через приращение каждой строку, применяя столбцы по мере необходимости.

for (var i = 0; i < resp.columns.length; i++) {   
    var tableHeader = document.createElement('p'); 
    tableRow.appendChild(tableHeader); 
    htmlTable.appendChild(tableRow); 
    var tableRow = document.createElement('div'); 

    var tableData = document.createElement('h2'); 
    var content = document.createTextNode(resp.rows[i][0]); // hotel name 
    tableData.appendChild(content); 
    tableRow.appendChild(tableData); 
    var tableData = document.createElement('a'); 
    tableData.setAttribute('src',resp.rows[i][1]); // website 
    tableRow.appendChild(tableData); 
    var tableHeader = document.createElement('p'); 
    tableRow.appendChild(tableHeader); 
    var content = document.createTextNode(resp.rows[i][2]); // hotel description 
    tableData.appendChild(content); 
    tableRow.appendChild(tableData); 
    var tableData = document.createElement('img'); 
    tableData.setAttribute('src',resp.rows[i][3]); // website 
    tableRow.appendChild(tableData); 
    htmlTable.appendChild(tableRow); 
} 
result.appendChild(htmlTable); 

proof of concept fiddle

фрагмент кода:

function dataHandler(resp) { 
 
    console.log(resp); 
 
    
 
    var result = document.getElementById('result'); 
 
    var htmlTable = document.createElement('div'); 
 
    
 
    var tableRow = document.createElement('div'); 
 
    for (var i = 0; i < resp.columns.length; i++) {   
 
     var tableHeader = document.createElement('p'); 
 
     tableRow.appendChild(tableHeader); 
 
     htmlTable.appendChild(tableRow); 
 
     var tableRow = document.createElement('div'); 
 

 
     var tableData = document.createElement('h2'); 
 
     var content = document.createTextNode(resp.rows[i][0]); // hotel name 
 
     tableData.appendChild(content); 
 
     tableRow.appendChild(tableData); 
 
     var tableData = document.createElement('a'); 
 
     tableData.setAttribute('src',resp.rows[i][1]); // website 
 
     tableRow.appendChild(tableData); 
 
     var tableHeader = document.createElement('p'); 
 
     tableRow.appendChild(tableHeader); 
 
     var content = document.createTextNode(resp.rows[i][2]); // hotel description 
 
     tableData.appendChild(content); 
 
     tableRow.appendChild(tableData); 
 
     var tableData = document.createElement('img'); 
 
     tableData.setAttribute('src',resp.rows[i][3]); // website 
 
     tableRow.appendChild(tableData); 
 
     htmlTable.appendChild(tableRow); 
 
    } 
 
    result.appendChild(htmlTable); 
 
} 
 

 
function getData() { 
 
    
 
    // Builds a Fusion Tables SQL query and hands the result to dataHandler 
 
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql='; 
 
    var queryUrlTail = '&key=AIzaSyCMILeBTrsiwVnO9_SSJ4HYtzZl14dXdRA'; 
 
    var tableId = '1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC'; 
 

 
    // write your SQL as normal, then encode it 
 
    var query = "SELECT 'Name', 'URL', 'Description', 'Image' FROM " + tableId + " ORDER BY ST_DISTANCE(Postcode, LATLNG(50.879311, 0.063803)) LIMIT 100; " 
 
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail); 
 

 
    var jqxhr = $.get(queryurl, dataHandler, "jsonp"); 
 
} 
 

 
getData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="result"></div>

Answer 2

Создать переменную во внутреннем цикле и проверить его значение и создавать различные элементы для различных значений и, если переменная досягаемость «3» создать элемент и установите его значение на «0 '

Answer 3

Используя тройной и оператор модуля, вы можете сделать каждый другой элемент заголовком.

for (var j = 0; j < resp.rows[i].length; j++) { 
     var ele = j % 2 !== 0 ? "p" : "h1"; 
     var tableData = document.createElement(ele); 
     alert(resp.rows[i][j]); 

     var content = document.createTextNode(resp.rows[i][j]); 
     tableData.appendChild(content); 
     tableRow.appendChild(tableData); 
    } 

http://jsfiddle.net/LqmgcLa6/9/