Javascript到jQuery的转换代码

Javascript to jQuery convert code

本文关键字：转换 代码 jQuery Javascript      更新时间：2023-09-26

我很难将以下代码更改为使用jQuery。有人能给我指正确的方向吗？

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

首先，让我告诉您，您的代码看起来非常好。

现在，要使用jQuery按ID选择元素，请使用ID选择器（"#ID"）。因此，不使用document.getElementById("dataList")，而是使用：

$("#dataList")

要动态创建DOM元素，请使用jQuery( html, props )。例如，要创建列表项，您可以使用：

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

最后，要将元素附加到另一个元素，请使用.append()。使用此功能，可以使用以下方法创建虚拟元素：

container = $("<div />").append(listItem);
相关文章：