Question

我得到了一个包含40个数字的列表，我必须转换为代码。以下是列表中一半的示例：

9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775

首先我必须取每个数字并将其添加到这行代码中（替换'a'和'img'标签的数字）

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

然后在img标签上我必须取最后3个数字并将它们移动到链接中的第一个位置，然后将结尾的第二个三个数字移到第二个位置，以便img链接起作用。

然后每10个li我必须用：

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

Answer 2

<强> 更新

我怎样才能只制作1个div并停止创建新的div？我可以限制数组中的前4个或5个数字吗？

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

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

您的主要步骤是：

使用split从数字字符串
使用forEach迭代数组元素

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

以下是如何实现这一目标的示例：

$(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>

Answer 4

将您的数字放入如下数组：

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

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

Answer 5

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

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

然后，根据需要使用循环生成标记。您可以使用子字符串方法（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring）

获得这3位数字

使用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个循环，您只需创建并附加另一个包装元素，然后再使用＆＃39;＆＃39; img＆＃39;和＆＃39; a＆＃39;标签

尝试使用这些概念解决问题，如果再次陷入困境，我们可以帮助您理清逻辑！

Answer 6

由于这被标记为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));

将数字列表转换为代码

6 个答案: