Змена Javascript масіва ў радок

У мяне ёсць наступны масіў у JavaScript

("error", "No name entered", "Invalid Email", "No Message")

Масіў можа быць таксама

("success", "Your message has been sent.")    

Я хацеў бы стварыць радок, якая выглядае наступным чынам

<div class="error">
  • No Name entered
  • Invalid Email
  • No Message
</div>

Першы элемент у масіве выкарыстоўваецца для класа сну астатнія будуць элементамі спісу,

Я паспрабаваў з дапамогай FormData [0], FormData [1], і г.д., але гэта проста друкуе нявызначанымі, калі элемент масіва не існуе.

0
Масіў называецца FormData
дададзена аўтар user1869566, крыніца
Масіў называецца FormData
дададзена аўтар user1869566, крыніца
Вы можаце дынамічна стварыць неўпарадкаваных спіс, Append элементы масіва падчас працы яго праз пятлю да даўжыні масіва
дададзена аўтар Harsha Venkatram, крыніца
Вы можаце дынамічна стварыць неўпарадкаваных спіс, Append элементы масіва падчас працы яго праз пятлю да даўжыні масіва
дададзена аўтар Harsha Venkatram, крыніца
@ Slobodan.blazeski Я мяркую, што гэта прасцей выкарыстоўваць нешта накшталт рулёў ў гэтым выпадку.
дададзена аўтар vittore, крыніца
@ Slobodan.blazeski Я мяркую, што гэта прасцей выкарыстоўваць нешта накшталт рулёў ў гэтым выпадку.
дададзена аўтар vittore, крыніца
@ Slobodan.blazeski Я мяркую, што гэта прасцей выкарыстоўваць нешта накшталт рулёў ў гэтым выпадку.
дададзена аўтар vittore, крыніца
Што такое пераменнае называецца жыллём зыходнага масіва?
дададзена аўтар Phillip Berger, крыніца
Чаму б не выкарыстоўваць некаторыя шаблонизатор як github.com/visionmedia/jade
дададзена аўтар slobodan.blazeski, крыніца
Чаму б не выкарыстоўваць некаторыя шаблонизатор як github.com/visionmedia/jade
дададзена аўтар slobodan.blazeski, крыніца
@vittore Рулі з'яўляецца занадта вялікім, ці падкрэсліць шаблоны, калі вы ўжо карыстаецеся падкрэслення і ня wan't дадатковых залежнасцяў, калупаць poison.Just не ствараць HTML ўручную яго памылка, схільнай і цяжка падтрымліваць.
дададзена аўтар slobodan.blazeski, крыніца
@vittore Рулі з'яўляецца занадта вялікім, ці падкрэсліць шаблоны, калі вы ўжо карыстаецеся падкрэслення і ня wan't дадатковых залежнасцяў, калупаць poison.Just не ствараць HTML ўручную яго памылка, схільнай і цяжка падтрымліваць.
дададзена аўтар slobodan.blazeski, крыніца
@vittore Рулі з'яўляецца занадта вялікім, ці падкрэсліць шаблоны, калі вы ўжо карыстаецеся падкрэслення і ня wan't дадатковых залежнасцяў, калупаць poison.Just не ствараць HTML ўручную яго памылка, схільнай і цяжка падтрымліваць.
дададзена аўтар slobodan.blazeski, крыніца
Чаму б не выкарыстоўваць некаторыя шаблонизатор як github.com/visionmedia/jade
дададзена аўтар slobodan.blazeski, крыніца

7 адказы

Я хацеў бы прапанаваць:

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body');
        $('
').appendTo(wrapper);
    }
    else {
        $('
', { text : formData[i] }).appendTo('div.' + formData[0] + ' > ul');
    }
}

JS Fiddle demo.

Як было адзначана ў каментарах, хоць, было б лягчэй, каб пазбегнуць паўторнага запыту да DOM кожнай ітэрацыі, так што гэтая версія падтрымлівае спасылкі на розныя створаныя-элементы:

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body'),
            ul = $('
').appendTo(wrapper);
    }
    else {
        $('
', { text : formData[i] }).appendTo(ul);
    }
}

JS Fiddle demo.

спасылкі:

2
дададзена
@Ian: і дзякуй, калі ласка, за дапамогу! =)
дададзена аўтар David Thomas, крыніца
@Ian: таму што, калі шчыра, я думаў пра тое, што рабіць, калі я напісаў арыгінальны (адправіў, каб забяспечыць карысны адказ), а потым адцягнулася на вячэру. <�Я> румяны ...
дададзена аўтар David Thomas, крыніца
1 для скрыпкі і спасылкі
дададзена аўтар Harsha Venkatram, крыніца
@DavidThomas нафіга проста спрабуе дапамагчы :) Добры адказ, дарэчы!
дададзена аўтар Ian, крыніца
Чаму вы не захоўваць спасылкі на элементы, якія вы ствараеце (далей уль ) і прыкладаючы LI элементы, якія, замест таго, запытваючы DOM кожнай ітэрацыі цыклу ?
дададзена аўтар Ian, крыніца

Вы можаце зрабіць

var array = ["error", "No name entered", "Invalid Email", "No Message"];

function makeDiv(array) {
var newDiv = '<div class="' + array[0] + '">
    '; for (var i = 1; i < array.length; i++) { newDiv += '
  • ' + array[i] + '
  • '; } newDiv += '
</div>';

//append newDiv somewhere

}
2
дададзена
@Ian - Ці зроблены змены, мае значна больш сэнсу ... Я над думаў першы элемент з бескарыснай логікай: \
дададзена аўтар tymeJV, крыніца
@tymeJV Няма праблем. Гэта было цалкам дапушчальна раней, я проста падумаў, што гэта было трохі залішнім, калі гэта заўсёды першы пункт вы праверка. Калі б гэта было як і любы іншы элемент, то, відавочна, трэба будзе ўключыць
дададзена аўтар Ian, крыніца
Чаму б вам перабрацца ўсе элементы? Заўсёды першы элемент і зрабіць яго справамі. Затым цыкл з 1 на </даўжыня кода>. <�Код>, калі / яшчэ не абавязкова ўключаць у пятлю
дададзена аўтар Ian, крыніца
Добра выглядаць. Проста атрымаць гатовы надрукаваць нешта падобнае.
дададзена аўтар Phillip Berger, крыніца

Гэта павінна зрабіць гэта для вас:

$('div').addClass(formData[0]);
$('li').each(function(index, el){ $(el).html(formData[index] || '') });

Згодна з каментарам лепш выкарыстоўваць для цыклу http://jsperf.com/jquery -Кожная-супраць-для цыклу/73 :

var lis = $('li');
for( int i = 0; i < lis.size(); i ++ ){
  var li = lis.eq(i);
  li.html(formData[i] || '');
}
1
дададзена
ОК, я знайшоў jsperf.com/jquery-each-vs-for-loop/ 73 . Для лепшы варыянт
дададзена аўтар juanpastas, крыніца
што выкарыстоўваць замест гэтага? для цыкла?
дададзена аўтар juanpastas, крыніца
UHG ... jQuery .each() вар'яцка павольна!
дададзена аўтар Phillip Berger, крыніца
Бінга! Вы яго атрымалі.
дададзена аўтар Phillip Berger, крыніца

Гэта павінна зрабіць гэта для вас:

$('div').addClass(formData[0]);
$('li').each(function(index, el){ $(el).html(formData[index] || '') });

Згодна з каментарам лепш выкарыстоўваць для цыклу http://jsperf.com/jquery -Кожная-супраць-для цыклу/73 :

var lis = $('li');
for( int i = 0; i < lis.size(); i ++ ){
  var li = lis.eq(i);
  li.html(formData[i] || '');
}
1
дададзена
ОК, я знайшоў jsperf.com/jquery-each-vs-for-loop/ 73 . Для лепшы варыянт
дададзена аўтар juanpastas, крыніца
што выкарыстоўваць замест гэтага? для цыкла?
дададзена аўтар juanpastas, крыніца
UHG ... jQuery .each() вар'яцка павольна!
дададзена аўтар Phillip Berger, крыніца
Бінга! Вы яго атрымалі.
дададзена аўтар Phillip Berger, крыніца
var formData = ["error", "No name entered", "Invalid Email", "No Message"]
  , first = formData.shift()
  , elem = $('<div />').addClass(first)
  , ul = $('
').appendTo(elem)

 $.each(formData, function( ind, item ) {
    $('
').text(item).appendTo(ul)
 })

//now elem has your DOM element 
0
дададзена

Вы б вывесіць імёны зменных для вашых масіваў? Гэта можа быць з-за памылкі апорнага памылкі/прызначэння.

У той жа час, просты цыкл можа зрабіць трук, але вы таксама можаце захацець зірнуць на прымяненне JavaScript шаблоны </а>. Гэта можа зрабіць рэчы як гэты значна прасцей.

Here's a JS Fiddle that may help you:

http://jsfiddle.net/HepFw/

var failureMessage = ["error", "No name entered", "Invalid Email", "No Message"],
    successMessage = ["success", "Your message has been sent."];


function getMarkup ( resultArray ) {
    var markup = "";

    for ( var i = 0, loopCount = resultArray.length; i < loopCount; i++) {
        if ( i === 0 ) {
            markup += '<div class="' + resultArray[i] + '">
    '; } else { markup += '
  • ' + resultArray[i] + '
  • '; } } return markup += '
</div>';   
}

document.getElementById('so-example-success').innerHTML = getMarkup( successMessage );
document.getElementById('so-example-failure').innerHTML = getMarkup( failureMessage );
0
дададзена

Вы б вывесіць імёны зменных для вашых масіваў? Гэта можа быць з-за памылкі апорнага памылкі/прызначэння.

У той жа час, просты цыкл можа зрабіць трук, але вы таксама можаце захацець зірнуць на прымяненне JavaScript шаблоны </а>. Гэта можа зрабіць рэчы як гэты значна прасцей.

Here's a JS Fiddle that may help you:

http://jsfiddle.net/HepFw/

var failureMessage = ["error", "No name entered", "Invalid Email", "No Message"],
    successMessage = ["success", "Your message has been sent."];


function getMarkup ( resultArray ) {
    var markup = "";

    for ( var i = 0, loopCount = resultArray.length; i < loopCount; i++) {
        if ( i === 0 ) {
            markup += '<div class="' + resultArray[i] + '">
    '; } else { markup += '
  • ' + resultArray[i] + '
  • '; } } return markup += '
</div>';   
}

document.getElementById('so-example-success').innerHTML = getMarkup( successMessage );
document.getElementById('so-example-failure').innerHTML = getMarkup( failureMessage );
0
дададзена