javascript - 将数字列表转换为代码

Question

我得到一个包含 40 个数字的列表，我必须将它们转换为代码。这是列表一半的示例:

97811019879719780385349741978038554236497815500221349781501132933978034553109497803742800249780670026197978125006979597800622977169781250075727978150113988897800623005469780812988406978081299354797814555397419780062363596978110198260097816300605899780735220775

首先，我必须获取每个数字并将其添加到这行代码(替换“a”和“img”标签的数字)

<li>
  <a href="/book/9780143034759">
    <img src="http://images.booksense.com/images/759/034/9780143034759.jpg" />
  </a>

然后在 img 标签上，我必须取最后 3 个数字并将它们移动到链接中的第一个位置，然后是从末尾开始的第二个三个数字并替换第二个位置，以便 img 链接正常工作。

然后每 10 里我必须用:

<div class="book-cover-list">
    <ul>
    </ul>
</div>

我的想法是有一个 HTML 文档，我可以将数字列表粘贴到其中，然后有一个 javascript 或 jquery 脚本可以为我完成所有工作。但是，我真的不知道该怎么做。因此，我们将不胜感激任何帮助。

完成后的代码如下所示:

<div class="book-cover-list">
    <ul>
        <li><a href="/book/9780143034759"><img src="http://images.booksense.com/images/759/034/9780143034759.jpg" /></a>
        <li><a href="/book/9781476728759"><img src="http://images.booksense.com/images/759/728/9781476728759.jpg" /></a>
        <li><a href="/book/9780143125471"><img src="http://images.booksense.com/images/471/125/9780143125471.jpg" /></a>
        <li><a href="/book/9780316017930"><img src="http://images.booksense.com/images/930/017/9780316017930.jpg" /></a>
        <li><a href="/book/9780307408877"><img src="http://images.booksense.com/images/877/408/9780307408877.jpg" /></a>
        <li><a href="/book/9781250092335"><img src="http://images.booksense.com/images/335/092/9781250092335.jpg" /></a>
        <li><a href="/book/9780316322423"><img src="http://images.booksense.com/images/423/322/9780316322423.jpg" /></a>
        <li><a href="/book/9780143109259"><img src="http://images.booksense.com/images/259/109/9780143109259.jpg" /></a>
        <li><a href="/book/9781451659177"><img src="http://images.booksense.com/images/177/659/9781451659177.jpg" /></a>
        <li><a href="/book/9780147515995"><img src="http://images.booksense.com/images/995/515/9780147515995.jpg" /></a>
    </ul>
</div>    

<div class="book-cover-list">
    <ul>
        <li><a href="/book/9780143034759"><img src="http://images.booksense.com/images/759/034/9780143034759.jpg" /></a>
        <li><a href="/book/9781476728759"><img src="http://images.booksense.com/images/759/728/9781476728759.jpg" /></a>
        <li><a href="/book/9780143125471"><img src="http://images.booksense.com/images/471/125/9780143125471.jpg" /></a>
        <li><a href="/book/9780316017930"><img src="http://images.booksense.com/images/930/017/9780316017930.jpg" /></a>
        <li><a href="/book/9780307408877"><img src="http://images.booksense.com/images/877/408/9780307408877.jpg" /></a>
        <li><a href="/book/9781250092335"><img src="http://images.booksense.com/images/335/092/9781250092335.jpg" /></a>
        <li><a href="/book/9780316322423"><img src="http://images.booksense.com/images/423/322/9780316322423.jpg" /></a>
        <li><a href="/book/9780143109259"><img src="http://images.booksense.com/images/259/109/9780143109259.jpg" /></a>
        <li><a href="/book/9781451659177"><img src="http://images.booksense.com/images/177/659/9781451659177.jpg" /></a>
        <li><a href="/book/9780147515995"><img src="http://images.booksense.com/images/995/515/9780147515995.jpg" /></a>
    </ul>
</div>

Answer 1

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

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);
});