Convert Liste von Zahlen Code

Question

erhalte ich eine Liste von 40 Zahlen, die ich Code zu konvertieren. Hier ist ein Beispiel für die Hälfte der Liste:

Zuerst habe ich jede Zahl nehmen und es zu dieser Codezeile hinzuzufügen (als Ersatz für die Nummer sowohl für die ‚a‘ und ‚img‘ -Tags)

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

dann auf dem img-Tag Ich muss die letzten 3 Zahlen nehmen und sie auf die erste Position in der Verbindung verschieben, dann die 2. drei Zahlen vom Ende und die 2. Position ersetzen, damit die IMG-Verbindung funktioniert.

Dann gilt für alle 10 li muss ich einpacken mit:

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

Meine Idee ein HTML-Dokument zu haben, war, dass ich die Liste von Zahlen in einfügen können und dann ein Javascript oder Jquery-Skript, das zu tun all die Arbeit für mich. Aber ich habe keine Ahnung, wie ich das machen soll. So würde jede Hilfe sehr geschätzt werden.

Das fertige Code sieht wie folgt aus:

<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

UPDATE

Wie kann ich nur nur 1 div machen und neue zu schaffen stoppen? Darf ich mich auf die ersten 4 oder 5 Nummern aus dem Array beschränken?

Sie können die for-Schleife nur auf die ersten Elemente beschränken, die Sie möchten. Für die divs können Sie nur einen außerhalb der for-Schleife erstellen.

Das Snippet:

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>

Für die erste empfehle ich Ihnen das neue DOM-Element mit jQuery-html-attributes wie zu bauen, in:

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

Ihre wichtigsten Schritte sind:

• Verwenden split an ein Array aus einer Reihe von Zahlen
• Verwenden forEach iterieren auf Array-Elementen erstellen

Die Schnipsel:

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>

Answer 2

Heres ein Beispiel, wie Sie dies erreichen könnte:

$(document).ready(function(){ 
 
    displayNumbers($(".numbers").val()); 
 
    
 
    $(".numbers").change(function(){ 
 
    \t displayNumbers($(this).val()); 
 
    }) 
 
}); 
 

 
function displayNumbers(rawNumbers){ 
 
\t var numbers = rawNumbers.split(" "); 
 
    $(".output").empty(); 
 
    for(i=0; i < numbers.length; i++){ 
 
    \t $(".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 3

Ihre Zahlen in ein Array Put wie so :

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

Verwenden Sie dann eine for-Schleife, um Elemente programmgesteuert hinzuzufügen. Ich würde empfehlen, document.createElement() und element.appendChild() zu verwenden.

Answer 4

Sie können, indem Sie diese Zahlen als Array zu starten:

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

Dann eine Schleife verwenden, um die Tags zu erzeugen, wie Sie es brauchen. Diese 3-stellige Zahlen können Sie erhalten, indem die Teil Methode (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring)

die Methode createelement (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) Verwenden Sie die Tags und die appendChild Methode (https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) bauen sie alle zusammen zu setzen. Jeweils 10 Schleifen erstellen und fügen Sie ein weiteres Wrapper-Element vor den Tags 'li', 'img' und 'a' an.

Versuchen Sie, das Problem mit der Verwendung dieser Begriffe zu lösen, und wenn Sie wieder nicht weiterkommen, können wir Ihnen helfen, die Logik zu sortieren!

Answer 5

Sie könnten ein Array verwenden und alle Tags mit den entsprechenden Werten generieren.

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 6

Da dies als Javascript Frage markiert, ist hier ein schneller Knoten Skript, das eine Output.html mit Ihrem gewünschten Format erzeugt. Speichern Sie dies in einer Datei namens stack.js und führen Sie dann node stack.js darauf aus, um die output.html in Ihrem lokalen Verzeichnis zu generieren.

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