1

I get a list of 40 numbers that I have to convert to code. Here is an example of half of the list:

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

First I have to take each number and add it to this line of code (replacing the number for both the 'a' and 'img' tags)

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

Then on the img tag I have to take the last 3 numbers and move them to the first position in the link then the 2nd three numbers from the end and replace the 2nd position in order for the img link to work.

Then for every 10 li's I have to wrap with:

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

My idea was to have an HTML document that I can paste the list of numbers into and then have a javascript or jquery script that will do all of the work for me. But, I don't really have any idea how to do it. So any help would be greatly appreciated.

This finished code looks like this:

<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>
Improve this question
3
  • split the array of numbers, then run a for loop to construct the HTML element (the list), then append it Commented Sep 26, 2016 at 21:38
  • There's one problem, the sequence of 3 numbers in every image... do you know that before hand? Commented Sep 26, 2016 at 21:43
  • He does, it's described in the 2nd paragraph. They're the at the end of the number. See my comment on @NinaScholz answer. There's more than 1 way to get them. Commented Sep 26, 2016 at 22:01

6 Answers 6

Reset to default
3

You could use an array and generate all tags with the appropriate values.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I wrote almost exactly this in a jsfiddle about a second before you posted. Only difference was the slicing, I chose .slice(-3) and .slice(-6,-3). And tabs and line breaks.
I also was going to add a header to the answer, "Is this your homework assignment?" ... because... obviously...
Suggested edit with some CSS for visibility in the answer. A very short crescendo of images is disorienting.
FYI; My edit suggestion has been peer reviewed. "This edit deviates from the original intent of the post." and "This edit was intended to address the author of the post and makes no sense as an edit." ... Fixing a missing div.className = 'book-cover-list'; on line 6, pressing "Tidy" in the markup editor, and adding some lines of CSS to style the output deviates from the original intent and makes no sense to post? AYFKM? Nina it's all up to you. There's no hope for them.
1

UPDATE

How can i make just only 1 div and stop from creating new ones? May I limit to the first 4 or 5 numbers from the array?

You may limit the for loop only to the first elements you want. For the divs, you may create only one, outside the for loop.

The 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>

For the first I suggest you to build the new dom element with jQuery-html-attributes like in:

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

Your main steps are:

  • Use split to create an array from a string of numbers
  • Use forEach to iterate on array elements

The 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 = 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>

Improve this answer

3 Comments

Hi, Thanks for showing me this. I have a couple of questions. I needed the code to display on the page so i can copy and paste it to a wysiwyg. So, I added this to the end of the script to accomplish it: $('.wrapper').each(function() {$(this).text($(this).html()); }); First, the HTML I wrote for the li tags omits it's closing tag but the .append() seems to force the closing li tag into the code so, how can i stop it from adding the closing li tag? Also, how can i make it just make 1 div and stop from creating new ones and just use the first 4 or 5 numbers from the array?
Each dom element must have a starting tag and a final tag. So you cannot stop/remove the final closing li tag
@user3063712 Answer updated with a second snippet regarding your second point. Thanks so much.
0

Put your numbers into an array like so:

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

Then use a for loop to add elements programmatically. I would recommend using document.createElement() and element.appendChild().

Improve this answer

Comments

0

You can start by setting these numbers as an array:

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

Then, use a loop to generate the tags as you need it. Those 3 digit numbers you can get by using the substring method (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring)

Use the createElement method (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) to build the tags and the appendChild method (https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to put it all together. Each 10 loops, you just create and append another wrapper element before the 'li', 'img' and 'a' tags.

Try solving the problem with using these concepts and if you get stuck again, we can help you to sort out the logic!

Improve this answer

Comments

0

Here´s an example how you could achieve this:

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

Improve this answer

Comments

0

Since this is tagged as a javascript question, here's a quick node script that generates an output.html with your desired format. Save this to a file named stack.js and then run node stack.js on it to generate the output.html in your local directory.

'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));
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.