Question

我正在尝试从纯JavaScript过渡到jQuery。我有一个for循环，它使用API中的数据动态创建HTML元素。这是我的旧代码：

<?php
if (!empty($_POST['keyword2'])) {

    $keyword2 = '%' . $_POST['keyword2'] . '%';
    $class = $_POST['clas'];
    $select = $con->prepare("SELECT DISTINCT areaname_name FROM tbl_areaname WHERE areaname_name LIKE (:keyword2) ORDER BY areaname_name ASC LIMIT 0, 5");
    $select->setFetchMode(PDO::FETCH_ASSOC);
    $select->bindParam(':keyword2', $keyword2, PDO::PARAM_STR);
    $select->execute();
    $data = $select->fetchAll();
    foreach ($data as $row) {
        // put in bold the written text
        $areaname_name = str_ireplace($_POST['keyword2'], '<b>' . $_POST['keyword2'] . '</b>', $row['areaname_name']);
        // add new option
        echo '<li onclick="set_item(this,' . "'#$class'" . ')">' . $areaname_name . '</li>';
    }
}

但是，当我转换到jQuery并使用它时

recipeDiv = [];
recipeDiv[i] = document.createElement("div"); 
recipeDiv[i].setAttribute("class", "recipeBlock");
recipeDiv[i].appendChild(someElement);

我收到以下错误： recipeDiv [i] .appendChild不是函数

我知道.appendChild（）不是jQuery（JS），但它不应该仍然有效吗？即使我使用jQuery .append（）函数，我仍然会收到错误。

非常感谢任何帮助。

Answer 1

您似乎通过互换jQuery和DOM API来混淆自己。它们不能互换使用。 document.createElement返回Element，$("<div />")返回jQuery对象。 Element对象具有appendChild方法，jQuery对象具有append方法。

作为一个好习惯，我建议您在DOM API或jQuery之间进行选择，并坚持下去。这是一个基于jQuery的纯问题解决方案

var recipeContainer = $("<div/>")
  .addClass("recipeContainer")
  .appendTo("body");

var recipeDiv = [];
var likes = [];

for (var i = 0; i < 20; i++) {

  //Create divs so you get a div for each recipe
  recipeDiv[i] = $("<div/>").addClass("recipeBlock");

  //Create divs to contain number of likes
  likes[i] = $("<div/>")
    .addClass("likes")
    .html("<b>Likes</b>");

  //Append likes blocks to recipe blocks
  recipeDiv[i].append(likes[i]);

  //Append recipe blocks to container
  recipeContainer.append(recipeDiv[i]);
}

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

Answer 2

也许没有创建someElement？代码需要如下吗？

recipeDiv = [];
var someElement = $("<div/>").addClass("recipeBlock");
recipeDiv[i].appendChild(someElement);

使用jQuery时，.appendChild（）不是函数

2 个答案: