Как создать тег <li>для каждой строки из JavaScript - PullRequest
Новая
       0

Как создать тег <li>для каждой строки из JavaScript

0 голосов
/ 24 октября 2018

В JavaScript у меня есть: 

var cards = [
    'fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 
    'fa fa-cube', 'fa fa-anchor', 'fa fa-leaf', 'fa fa-bicycle', 
    'fa fa-diamond', 'fa fa-bomb', 'fa fa-leaf', 'fa fa-bomb', 'fa fa-bolt', 
    'fa fa-bicycle', 'fa fa-paper-plane-o', 'fa fa-cube'
];

И я хочу создать тег li для каждого элемента в ul, который имеет имя класса deck.

Как мне этого добиться?

var cards = ['fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 'fa fa-cube', 'fa fa-anchor', 'fa fa-leaf', 'fa fa-bicycle', 'fa fa-diamond', 'fa fa-bomb', 'fa fa-leaf', 'fa fa-bomb', 'fa fa-bolt', 'fa fa-bicycle', 'fa fa-paper-plane-o', 'fa fa-cube'];
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <meta name="description" content="">
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <div class="container">
        <header>
            <h1>Matching Game</h1>
        </header>

        <section class="score-panel">
        	<ul class="stars">
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        	</ul>

        	<span class="moves">3</span> Moves

            <div class="restart">
        		<i class="fa fa-repeat"></i>
        	</div>
        </section>

        <ul class="deck">
          // HERE I WANT TO BE ADD a li tag for each string from var cards
        </ul>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

Ответы [ 5 ]

0 голосов
/ 24 октября 2018

Сопоставить массив. 

cards.map(x => document.querySelector('.deck').innerHTML += '<li><i class="'+x+'"></i></li>')


let cards = ['fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 'fa fa-cube', 'fa fa-anchor', 'fa fa-leaf', 'fa fa-bicycle', 'fa fa-diamond', 'fa fa-bomb', 'fa fa-leaf', 'fa fa-bomb', 'fa fa-bolt', 'fa fa-bicycle', 'fa fa-paper-plane-o', 'fa fa-cube']

cards.map(x => document.querySelector('.deck').innerHTML += '<li><i class="'+x+'"></i></li>')
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<ul class=deck></ul>

jКачественный способ: 

$('.deck').html(cards.map(x=>'<li><i class="'+x+'"></i></li>'))
0 голосов
/ 24 октября 2018 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <meta name="description" content="">
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript">

        var cards = ['fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 'fa fa-cube', 'fa fa-anchor', 'fa fa-leaf', 'fa fa-bicycle', 'fa fa-diamond', 'fa fa-bomb', 'fa fa-leaf', 'fa fa-bomb', 'fa fa-bolt', 'fa fa-bicycle', 'fa fa-paper-plane-o', 'fa fa-cube'];
        var str = '';

        cards.forEach(function(slide) {
          str += '<li><i class="'+ slide + '"></i></li>';
        }); 

        $(document).ready(function(){
            $(".deck").html(str);
        });
    </script>
</head>
<body>

    <div class="container">
        <header>
            <h1>Matching Game</h1>
        </header>

        <section class="score-panel">
            <ul class="stars">
                <li><i class="fa fa-star"></i></li>
                <li><i class="fa fa-star"></i></li>
                <li><i class="fa fa-star"></i></li>
            </ul>

            <span class="moves">3</span> Moves

            <div class="restart">
                <i class="fa fa-repeat"></i>
            </div>
        </section>

        <ul class="deck">
          // HERE I WANT TO BE ADD a li tag for each string from var cards
        </ul>
    </div>


</body>
</html>
0 голосов
/ 24 октября 2018

вы можете сделать что-то вроде этого, я использовал простой цикл for для перебора всех элементов массива и создал динамический li для каждого элемента массива, а затем добавил его в деку. 

var cards = ['fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 'fa fa-cube', 'fa fa-anchor', 'fa fa-leaf', 'fa fa-bicycle', 'fa fa-diamond', 'fa fa-bomb', 'fa fa-leaf', 'fa fa-bomb', 'fa fa-bolt', 'fa fa-bicycle', 'fa fa-paper-plane-o', 'fa fa-cube'];

for(var i=0;i<cards.length;i++){
  var item = document.createElement("li");
  item.innerText = cards[i];
  document.getElementById("deck").append(item);
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <meta name="description" content="">
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <div class="container">
        <header>
            <h1>Matching Game</h1>
        </header>

        <section class="score-panel">
        	<ul class="stars">
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        	</ul>

        	<span class="moves">3</span> Moves

            <div class="restart">
        		<i class="fa fa-repeat"></i>
        	</div>
        </section>

        <ul class="deck" id="deck">
<!-- // HERE I WANT TO BE ADD a li tag for each string from var cards -->
          
        </ul>
    </div>

    <script src="js/app.js"></script>
</body>
</html>
0 голосов
/ 24 октября 2018

Сначала я бы добавил id к вашему ul: 

<ul id="cardsList" class="deck">

</ul>

Если вы не используете jQuery, для простого JS вам нужно что-то вроде этого: 

function fillInCardsList(cardsArr) {
  for (i = 0; i < cardsArr.length; i++) { 
    var liAsStr = '<li><i class="' +  cardsArr[i] + '"></i></li>';
    document.getElementById('cardsList').innerHTML += liAsStr;
  }
}

И тогда вы можете просто вызвать эту функцию с массивом карт в качестве ввода: 

fillInCardsList(cards);
0 голосов
/ 24 октября 2018

вы можете сделать это с помощью foreach цикла. 

cards.forEach(function(item) {
  document.getElementById('deck').insertAdjacentHTML('beforeend', '<li><i class="'+item+'"></i></li>');
});

здесь я использовал идентификатор вместо класса CSS deck, что облегчает задачу!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...