Как я могу использовать jQuery, чтобы сделать содержимое элемента таким же, как у другого?

Question

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

Это мой jQuery -

const johnName = $("#john").siblings("span");
const johnNameMenu = $(".john").children("h1").val(); 

johnName.html(johnNameMenu);

Это код на моем сайте, который я хочу отобразить в меню -

<section class="john">
  <div class="team-header" id="john">
    <div class="teamlogo">
    <img src="images/logos/lazio.png" />
    <h1>John's Team</h1>
    </div>
  </div>
  <div class="john-roster team-rosters">
    <?php include ('john.php'); ?>
  </div>
</section>

Это код в выпадающем меню -

<a href="#john" id="john-link" class="anchor">
<span></span></a>

Я хочу, чтобы в раскрывающемся меню появилась «Команда Джона».

Что не так с моим кодом jQuery?

Answer 1

Для получения текста элемента вы используете функцию text(); val() для <input> элементов. Примечание: даже если я оставил HTML как есть, id должен быть уникальным на странице. Вы должны использовать class, если вы хотите иметь несколько таких тегов <a>.

Ваши селекторы и использование .children были неверны. Если вы все еще хотите использовать .children, строка будет $('.john').children().find('span').
. Я бы рекомендовал использовать более специфичные c селекторы, чем .john (children far down in hierarchy).

.

const johnName = $(".john span");
const johnNameMenu = $(".john h1").text();
console.log(johnNameMenu)
johnName.each(function(){
   $(this).html(johnNameMenu);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the code on my site which I want to appear in the menu -

<section class="john">
  <div class="team-header" id="john">
    <div class="teamlogo">
    <img src="images/logos/lazio.png" />
    <h1>John's Team</h1>
    </div>
  </div>
  <div class="john-roster team-rosters">
<a href="#john" id="john-link" class="anchor">
<span></span></a>
<a href="#john" id="john-link" class="anchor">
<span></span></a>
  </div>
</section>

Answer 2

попробуйте

    const johnName = $("#john").closest("selection").find("span");
    const johnNameMenu = $(".john").children("h1").val(); 

    johnName.html(johnNameMenu);

Answer 3

Ваш span находится внутри якоря #john, поэтому селектор будет $("#john > span")

const johnName = $("#john > span");
const johnNameMenu = $(".john").children("h1").text(); 

johnName.html(johnNameMenu);