Превращение div, который включает в себя ul со скрытым списком li из HTM в JS

Я практикую свои навыки работы с JS и хотел бы полностью или почти полностью превратить свой HTML в JS. Я хотел бы сосредоточиться на создании этих элементов и заставить их работать.

var main = function() {
        $(document).ready(function () {
            $('.recipePicContainer').click(function () {
                $(this).next('.recipes').toggle("slow").toggleClass('selected');
            });
        });
    };
    $(document).ready(main);
<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>
    </div>

Источник

1 ответ

Хорошо, вот часть флажка разобралась:

 $('<input type="checkbox" value="1" />').prependTo(".ingredients");

все еще нужна помощь с циклом. кто-нибудь?

Источник
Другие вопросы по тегам