У меня есть множество контента на странице, включая некоторые разделы, подобные приведенным ниже, но перемежающиеся с другими разделами контента.

<main>
  <section class="module content content-fact">
    <div class="container" id="0"></div>
  </section>

  <section class="module content content-fact">
    <div class="container" id="1"></div>
  </section>

  <section class="module content content-fact">
    <div class="container"></div>
  </section>
</main>

У меня есть массив случайных фактов, которые я рандомизировал с помощью функции Underscore.js --> _.shuffle().

const spiderFacts = [
    "Spiders are not insects. They are arachnids. Both arachnids and insects are arthropods.",
    "Spiders eat about 200 kilograms of insects per hectare per year.",
    "Spiders inhabit just about every corner of the globe.",
    "Charlotte in E.B. White’s Charlotte’s Web was a barn orbweaver spider, <em>Araneus cavaticus<em>."
]

const randomSpiderFacts = _.shuffle(spiderFacts);

Я хочу добавить элемент p, содержащий один случайный факт, к каждому section.content-fact > div.container на странице, но я не могу понять, как это сделать.

Пока у меня есть ...

for (var fact in randomSpiderFacts) {
  var newElement = document.createElement('p');
  newElement.className = "fact";
  newElement.innerHTML = randomSpiderFacts[fact];
  $('.content-fact > .container').appendChild(newElement);
}

Я чувствую, что иду по неправильному пути, но не знаю, как вернуться на правильный путь. Кто-нибудь может помочь?

Я застрял, пытаясь понять, как это сделать, и надеюсь, что я ясно объяснил, что пытаюсь сделать.

1
kait 3 Май 2018 в 22:04

1 ответ

Лучший ответ

Ваш код чистый, это функция appendChild (), это не часть jquery.

Также каждый факт будет добавлен к каждому div .fact, поэтому отмените функцию, зациклив div и добавив к каждому div содержание факта, используя appendTo ()

См. Ниже фрагмент:

const spiderFacts = [
    "Spiders are not insects. They are arachnids. Both arachnids and insects are arthropods.",
    "Spiders eat about 200 kilograms of insects per hectare per year.",
    "Spiders inhabit just about every corner of the globe.",
    "Charlotte in E.B. White’s Charlotte’s Web was a barn orbweaver spider, <em>Araneus cavaticus<em>."
]

const randomSpiderFacts = _.shuffle(spiderFacts);

$('.content-fact > .container').each(function(i,el){
  // check if not exceeding the array so return empty string
  var factContent = randomSpiderFacts[i] ? randomSpiderFacts[i] : "";
  $("<p>").addClass("fact").html(factContent).appendTo(el);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>

<section class="module content content-fact">
  <div class="container" id="0"></div>
</section>

<section class="module content content-fact">
  <div class="container" id="1"></div>
</section>

<section class="module content content-fact">
  <div class="container"></div>
</section>
2
marc_s 20 Дек 2020 в 13:17