将数字列表转换为代码

您可以使用数组并生成具有适当值的所有标记。

var isbn = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775',
    numbers = isbn.split(' '),
    div = document.createElement('div'),
    ul = document.createElement('ul');
div.appendChild(ul);
document.body.appendChild(div);
numbers.forEach(function (isbn, i) {
    var li = document.createElement('li'),
        a = document.createElement('a'),
        img = document.createElement('img');
    if (i && i % 10 === 0) {
        div = document.createElement('div');
        div.className = 'book-cover-list';
        ul = document.createElement('ul');
        div.appendChild(ul);
        document.body.appendChild(div);
    }
    img.src = 'http://images.booksense.com/images/' + isbn.slice(10, 13) + '/' + isbn.slice(7, 10) + '/' + isbn + '.jpg';
    a.href = '/book/' + isbn;
    a.appendChild(img);
    li.appendChild(a);
    ul.appendChild(li);
});

更新

我怎么能只做一个div和停止创建新的?我可以从数组中限制前4或5个数字吗?

你可以将for循环限制为你想要的第一个元素。对于div，您只能在For循环之外创建一个div。

代码片段:

var data = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');
var eleToAppend = $('<div/>', {class: 'book-cover-list'}).append($('<ul/>'));
for(var index=0; index<5; index++) {
  var val = data[index];
  var newLi = $('<li/>').append($('<a/>', {href: '/book/' + val})
                                .append($('<img/>', {src: 'http://images.booksense.com/images/' + val.substr(val.length - 3) + '/' + val.substr(val.length - 6, 3) + '/' + val + '.jpg'})))
  eleToAppend.find('ul').append(newLi);
}
$(document.body).append(eleToAppend);

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

首先，我建议您使用jQuery-html-attributes构建新的dom元素，如:

$('<div/>', {class: 'book-cover-list'}).append($('<ul/>'))

你的主要步骤是:

• 使用split从一串数字创建一个数组
• 使用forEach对数组元素进行迭代

代码片段:

var data = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');
var eleToAppend = null;
data.forEach(function(val, index) {
  if ((index % 10) == 0) {
    if (eleToAppend != null) {
      $(document.body).append(eleToAppend);
    }
    eleToAppend = $('<div/>', {class: 'book-cover-list'}).append($('<ul/>'));
  }
  var newLi = $('<li/>').append($('<a/>', {href: '/book/' + val})
                      .append($('<img/>', {src: 'http://images.booksense.com/images/' + val.substr(val.length - 3) + '/' + val.substr(val.length - 6, 3)+ '/' + val + '.jpg'})))
  eleToAppend.find('ul').append( newLi);
})
if (eleToAppend != null) {
  $(document.body).append(eleToAppend);
}

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

将数字放入数组中，如下所示:

var str = "9781101987971 9780385349741 9780385542364"; // et cetera
var arr = str.split(" ");

然后使用for循环以编程方式添加元素。我建议使用document.createElement()和element.appendChild()。

您可以先将这些数字设置为数组:

["9781101987971", "9780385349741", "9780385542364"]

然后，使用循环生成所需的标记。这些3位数字可以通过substring方法(https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring)

使用createElement方法(https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)构建标签，并使用appendChild方法(https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)将它们组合在一起。每10个循环，您只需在'li'， 'img'和'a'标记之前创建并附加另一个包装器元素。

下面是如何实现这一点的示例:

$(document).ready(function(){
  displayNumbers($(".numbers").val());
  
  $(".numbers").change(function(){
  	displayNumbers($(this).val());
  })
});
function displayNumbers(rawNumbers){
	var numbers = rawNumbers.split(" ");
  $(".output").empty();
  for(i=0; i < numbers.length; i++){
  	$(".output").append("<li><a href='/book/" + numbers[i] + "'> img tag here with id: " + numbers[i] + " </a></li>");
  }
}

.numbers {
  width:100%;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<textarea class="numbers">9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775
</textarea>
<ul class="output"></ul>

由于这被标记为javascript问题，因此这里有一个快速的节点脚本，可以生成具有所需格式的output.html。将其保存到一个名为stack.js的文件中，然后在其上运行node stack.js以在本地目录中生成output.html。

'use strict';
const fs = require('fs');
const nums = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');
const createList = num => {
    return `
        <li><a href="/book/${num}"><img src="http://images.booksense.com/images/759/034/${num}.jpg" /></a></li>
    `;
}
const createSnippet = nums => {
  let output = '';
  for (let i=0; i < nums.length; ++i) {
    if (i === 0 || i % 10 === 0) {
      output += '<div class="book-cover-list"><ul>';
    }
    output += createList(nums[i]);
    if (i === 0 || i % 10 === 9 || i === nums.length - 1) {
      output += '</ul></div>';
    }
  }
  return output;
}
fs.writeFileSync('output.html', createSnippet(nums));