javascript - 将 HTML 元素翻译成 Jquery 但看不到它们

Question

所以我试图通过在 JS 中创建大部分代码来更好地练习 JS 和 Jquery。 我试图搜索并实现这个方法，但空手而归。 我将附上原始 HTML，然后在 Jquery 中尝试:

HTML

 <div class="mainContainer col-md-12 col-xs-12">

    <div class="checkBoxes">
        <span class="recipePicContainer">
            <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail">
            <div>Cocktail</div>
        </span>
        <ul class="recipes">
           <li class="ingredient"><input type="checkbox"> ingredient 1</li>
           <li class="ingredient"><input type="checkbox"> ingredient 2</li>
           <li class="ingredient"><input type="checkbox"> ingredient 3</li>
           <li class="ingredient"><input type="checkbox"> ingredient 4</li>
           <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>

Jquery

var main = function() {
    $(document).ready(function () {

       var $checkBoxes = $('<div>',{class: "checkBoxes"});
       var $recipePicContainer = $('<span>', {class: "recipePicContainer"});
       var $img = document.getElementById("recipe");
       var $div = $('<div></div>');
        $('.mainContainer').append($checkBoxes);
            $($checkBoxes).append($recipePicContainer);
                $($recipePicContainer).append($img);
                $($recipePicContainer).append($div).append('Cocktail');
        $('.recipePicContainer').click(function () {
            $(this).next('.recipes').toggle("slow").toggleClass('selected');

        });
    });
};
$(document).ready(main);

谢谢!

Answer 1

解决方案在这里 https://jsfiddle.net/xg5r72xt/

  $(document).ready(function () {

     var $checkBoxes = $('<div>',{class: "checkBoxes"});
     var $recipePicContainer = $('<span>', {class: "recipePicContainer"});
     var $img = document.getElementsByClassName("recipe");
     console.log($img);
     var $div = $('<div></div>');
      $('.mainContainer').append($checkBoxes);
          $($checkBoxes).append($recipePicContainer);
              $($recipePicContainer).append($img);
              $($recipePicContainer).append($div).append('Cocktail');
      $('.recipePicContainer').click(function () {
          $(this).next('.recipes').toggle("slow").toggleClass('selected');

      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer col-md-12 col-xs-12">

    <div class="checkBoxes">
        <span class="recipePicContainer">
            <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail">
            <div>Cocktail</div>
        </span>
        <ul class="recipes">
           <li class="ingredient"><input type="checkbox"> ingredient 1</li>
           <li class="ingredient"><input type="checkbox"> ingredient 2</li>
           <li class="ingredient"><input type="checkbox"> ingredient 3</li>
           <li class="ingredient"><input type="checkbox"> ingredient 4</li>
           <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>

代码问题

var $img = document.getElementById("菜谱");

更改了代码说明 具有 ID 菜谱的元素不存在，而是我使用了图像标记中的“菜谱”类。

我相信这是问题之一。