Прокрутите строку с помощью jQuery/javascript

Я загружаю простой txt файл с того же сервера, что и текущая веб-страница, используя jQuery - этот файл всегда будет содержать простое число без форматирования - например. 123456

$(document).ready(function(){    

  var test;
  $.getJSON('myfile.txt', function(data) {
    test = data;
    showAlert(); // this call will display actual value
  });

  function showAlert() {
    alert(test);
  }

});

В настоящий момент код вытаскивает файл, а затем отображает содержимое в окне предупреждения, но то, что я хочу сделать, читается через символ ответа по символу и создает строку HTML, которую я могу затем вставить на страницу - каждый символ будет преобразован в тег изображения.

Например, если ответ был 123, я хочу создать строку, содержащую следующий HTML:

<img src="1.png" />
<img src="2.png" />
<img src="3.png" />

И тогда я вставлю эту строку в div на моей странице.

Может ли кто-нибудь предложить, как пройти цикл ответа, чтобы создать теги img?

Спасибо

Ответы

Ответ 1

Я люблю jQuery.map для таких вещей. Просто сопоставьте (то есть преобразуйте) каждое число в фрагмент html:

var images = jQuery.map((1234567 + '').split(''), function(n) {
  return '<img src="' + n + '.png" />'
})

images[0]; // <img src="1.png" />
images[1]; // <img src="2.png" />
images[2]; // <img src="3.png" />
// etc...

который вы можете затем join('') и застреваете в DOM одним быстрым нажатием:

$('#sometarget').append(images.join(''))

И боб твой дядя.

Ответ 2

Чтобы перебрать символы в строке, вы должны сделать это:

var s = '123456';
for ( var i = 0; i < s.length; i++ )
{
  // `s.charAt(i)` gets the character
  // you may want to do a some jQuery thing here, like $('<img...>')
  document.write( '<img src="' + s.charAt(i) + '.png" />' );
}

Ответ 3

Вы можете использовать регулярное выражение, которое соответствует одному символу, и заменить каждый символ тегом изображения, который содержит символ:

var html = data.replace(/(.)/g, '<img src="$1.png" />')

Образец . соответствует одному символу, круглые скобки вокруг него делают его совпадением для вывода, параметр g обозначает глобальный, так что он заменяет все математические, а не только первые. Маркер $1 в заменяющей строке - это место, где будет помещен вывод соответствия (символ).

Ответ 4

Я собираюсь показать несколько разных способов перебора символов в строке str, используя только собственные функции JavaScript.

Равнина для цикла

Хороший старый путь ES3. Это будет работать в браузерах, таких же старых, как IE 6.

for (var i = 0; i < str.length; ++i) {
    var chr = str.charAt(i);
    alert(chr);
}

forEach по разделительному массиву

совместим с ES5.

str.split('').forEach(function (chr) {
    console.log(chr);
});

для каждого в строке

ES5 совместим. Будет выполняться немного быстрее, чем предыдущий метод для больших строк.

Array.prototype.forEach.call(str, function (chr) {
    console.log(chr);
});

для цикла

Работает только в новых браузерах. Требуется поддержка ES6.

for (var chr of str) {
    console.log(chr);
}

В качестве примечания, в некоторых распространенных случаях массивные операции над символами в строке лучше выполнять без итерации с использованием парадигм функционального программирования. Например, чтобы получить массив из символов в строке, достаточно str.split('') или с синтаксисом ES6 [...str]. Чтобы сопоставить символы в строке, подобной элементам массива, гораздо лучше вызвать Array.prototype.map непосредственно в строке:

Array.prototype.map.call(str, function (chr) {
    return '<img src="' + chr + '.png" />';
});

Ответ 5

Простейший цикл for-in:

const str = 'ABC123'

for (let i in str)
  console.log( str[i] )