Получить весь текст h2 из основного контейнера, отобразить их на боковой панели

ProgramBox

Получить весь текст h2 из основного контейнера, отобразить их на боковой панели

Post author:admin
Запись опубликована:11 февраля, 2023
Post category:Вопросы по программированию

#jquery #css

Вопрос:

Я бы поклялся, что мой код правильный, но, похоже, он не работает. Вот моя скрипка: https://jsfiddle.net/py5cvpmz/1 /

И вот код jQuery:

 var searchArea = $('main');
var blockArea = $('.sidebar .container');
var blockDynamic = $('.block-dynamic ul');
var items = [];
var title;

blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');

searchArea.find('h2').each(function(e) {
  title = $(this).text();
  items.push(title);
});

    $.each(items, function(i, val) {
      // When I use a console.log here to output 'val', it works fine
      blockDynamic.append('<li class="item-'   i   '">'   val   '</li>');
    });

Ответ №1:

Вы кэшируете blockDynamic перед добавлением элемента, на который он ссылается blockArea . Чтобы убедиться, что ваш код работает, переместите объявление blockDynamic после вызова append .

 var searchArea = $('main');
var blockArea = $('.sidebar .container');
blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');

var blockDynamic = $('.block-dynamic ul');

searchArea.find('h2').each(function(i, e) {
  var title = $(this).text();
  blockDynamic.append('<li class="item-'   i   '">'   title   '</li>');
});

 main {
  width: 300px;
  float: left;
  height: auto;
  padding: 20px;
  background-color: #ccc;
}

main h2 {
  width: 100%;
  text-align: center;
}

.sidebar {
  float: left;
  width: 200px;
  margin-left: 20px;
  background-color: #333;
}

.sidebar .container {
  width: 100%;
  height: auto;
  color: #fff;
  padding: 20px;
}

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


</script>
<main>
  <h2>
this is a test h2
</h2>
  <h2>
this is another test h2
</h2>
  <h2>
this is, once again, a test h2
</h2>
  <h2>
this is the last test h2
</h2>
</main>
<div class="sidebar">
  <div class="container">
    <!-- Here I want all the H2 titles as menu items -->
  </div>
</div>

1. черт. ты опередил меня на несколько секунд. мой плохой … я тоже вставил фрагмент

2. @MaartenWolfsen в качестве упражнения вы можете очистить свой код и полностью удалить один из этих циклов.

3. @chazsolo Да, это хороший план! Это был всего лишь прототип, но я обязательно исправлю свой код! И всем остальным, я дам вам всем голос за помощь!

4. @MihaiT Я знаю, что всегда забываю о фрагментах кода

5. @chazsolo как вы сказали, я немного почистил jQuery: jsfiddle.net/wwpf8x1m

Ответ №2:

Сопоставление элементов .block-dynamic ul не существует к моменту, когда вы пытаетесь его получить.

У вас должно быть что-то вроде этого

 blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');
var blockDynamic = blockArea('.block-dynamic ul');

Обратите внимание, что я переместил blockDynamic инициализацию ПОСЛЕ blockArea добавления содержимого.

Ответ №3:

объявите var blockDynamic = $('.block-dynamic ul'); после добавления ul . потому что, если вы сделаете это раньше, ul не существует, так что переменная равна null

 var searchArea = $('main');
var blockArea = $('.sidebar .container');

var items = [];
var title;

blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');
var blockDynamic = $('.block-dynamic ul');
searchArea.find('h2').each(function(e) {
  title = $(this).text();
  items.push(title);

});

$.each(items, function(i, val) {
  blockDynamic.append('<li class="item-'   i   '">'   val   '</li>');
});

 main {
  width: 300px;
  float: left;
  height: auto;
  padding: 20px;
  background-color: #ccc;
}

main h2 {
  width: 100%;
  text-align: center;
}

.sidebar {
  float: left;
  width: 200px;
  margin-left: 20px;
  background-color: #333;
}

.sidebar .container {
  width: 100%;
  height: auto;
  color: #fff;
  padding: 20px;
}

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


</script>
<main>
  <h2>
this is a test h2
</h2>
  <h2>
this is another test h2
</h2>
  <h2>
this is, once again, a test h2
</h2>
  <h2>
this is the last test h2
</h2>
</main>
<div class="sidebar">
  <div class="container">
    <!-- Here I want all the H2 titles as menu items -->
  </div>
</div>

Ответ №4:

В этой строке var blockDynamic = $(‘.block-dynamic ul’); элемент не существует, если вы хотите, попробуйте это:

 var blockDynamic = '.block-dynamic ul';
searchArea.find('h2').each(function(i) {
  $(blockDynamic).append('<li class="item-' i '">' $(this).text() '</li>');
});

Ответ №5:

Чтобы получить h2, а не только его содержимое:

 searchArea.find('h2').each(function() {
  blockArea.append($(this).clone());
});