Javascript to jQuery convert code

Question

I'm having difficulty in changing the following code to use jQuery. Could anyone point me in the right direction?

function addListItem() {
    var listItem, container, dataList = document.getElementById('dataList');

    // Create our list item
    listItem = document.createElement('div');
    listItem.setAttribute('data-bb-type', 'item');
    listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
    listItem.setAttribute('data-bb-title', 'Title ');
    listItem.innerHTML = 'My description';

    // Create a dummy container
    container = document.createElement('div');
    container.appendChild(listItem);

    // Apply the styling
    bb.imageList.apply([container]);

    // Append the item
    dataList.appendChild(container.firstChild);

    // re-compute the scrolling area
    if (bb.scroller) {
        bb.scroller.refresh();
    }
}

perhaps you could post your attempt at jQuery, and we could help work through the problems you encountered. You're more likely to get help that way than simply asking for someone to do it for you. — jackwanders
– jackwanders, Commented Sep 7, 2012 at 20:20
Why do you need to convert it to jquery anyway? Seems like it's perfectly good javascript to me. — Nick Hagianis
– Nick Hagianis, Commented Sep 7, 2012 at 20:21

João Silva · Accepted Answer · 2012-09-07 20:38:04Z

1

First of all, let me tell you that your code looks perfectly fine.

Now, to select an element by its ID using jQuery, use the ID Selector (“#id”). Thus, instead of using document.getElementById("dataList"), you'd use:

$("#dataList")

To create DOM elements on the fly, use jQuery( html, props ). For example, to create your list item, you'd use:

listItem = $("<div />", {
  data-bb-type: 'item',
  data-bb-img: 'images/icon/icon11.png',
  data-bb-title: 'Title'
}).html("My description");

Finally, to append elements to another, use .append(). With this function, your dummy element creation could be done using the following:

container = $("<div />").append(listItem);

answered Sep 7, 2012 at 20:38

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Javascript to jQuery convert code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related