Как вернуть массив через цикл for?
Я пытаюсь разбить массив, чтобы использовать данные в качестве тега href привязки. Я могу заставить массивы войти в консоль, но каждый menu-link href ссылается на #News.
Вот мой код:
$(document).ready(function(){
if ($('.newsletter-accordion').find('.headline_title').length > 0) {
var all = $(".headline_title").map(function() {
return this.innerHTML;
});
console.info(all);
for(var i = 0; i < all.length; i++) {
$('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap('<li><a class = "menu-link" href = "#' + all[i] + '" ></a></li>');
console.info(all[i])
}
}
});
Я добавляю данные в id информационный бюллетень nav для использования в качестве навигации по странице. Я не уверен, правильно ли я называю это с помощью + all[i]?
Любая помощь будет оценена по достоинству.
Обновлять:
мой журнал консоли json.
{"0":"News","1":"Gallery Title","2":"tyest","length":3,"prevObject":{"0":{},"1":{},"2":{},"length":3,"prevObject":{"0":{"location":{"ancestorOrigins":{},"href":"https://croydon.vm/newsletters/4th-march-2022/#News","origin":"https://croydon.vm","protocol":"https:","host":"croydon.vm","hostname":"croydon.vm","port":"","pathname":"/newsletters/4th-march-2022/","search":"","hash":"#News"},"jQuery32100224421490645290161":{"events":{"webkitvisibilitychange":[{"type":"webkitvisibilitychange","origType":"webkitvisibilitychange","guid":11,"namespace":""}],"ready":[{"type":"ready","origType":"ready","guid":7,"namespace":"slick.slick-0"}],"click":[{"type":"click","origType":"click","guid":16,"selector":".accordion-btn","needsContext":false,"namespace":""}]},"focusout":1,"focusin":1},"jQuery360044517605261132511":{"events":{"ajaxSuccess":[{"type":"ajaxSuccess","origType":"ajaxSuccess","guid":1428,"namespace":""}],"touchstart":[{"type":"touchstart","origType":"touchstart","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}],"mousedown":[{"type":"mousedown","origType":"mousedown","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}]}}},"length":1}}}
я также использую гибкий контент, так что это один из блоков html
<section class = "newsletter-accordion">
<?php
$headline = get_sub_field('section_headline');
?>
<h1 class = "headline_title" id = "<?php echo $headline; ?>"><?php echo $headline; ?></h1>
<h1 class = "" id = "<?php echo $headline; ?>"><?php echo $headline; ?></h1>
<div class = "grid_container">
<div class = "row single_content__wrapper justify-content-center ">
он вызывает заголовок заголовка h1, этот заголовок появляется и в других блоках.
спасибо за ваш ответ @ADyson - я обновил OP в соответствии с просьбой.
Спасибо. Можете ли вы также показать HTML, с которым вы работаете, в частности биты, которым будет соответствовать селектор $(".headline_title"). Необходимо увидеть структуру HTML в элементах, соответствующих этому классу.
@ADyson brill - я обновил код
Готовый HTML (в том виде, в котором он доставлен в браузер) будет лучше, чем приправленный PHP-кодом, потому что ваш JS-код работает с готовым HTML, а не с PHP. Где, например, в нем появляются «Новости»? Можем ли мы предположить, что это результат echo $headline?
Правильно @ADyson - я устанавливаю идентификатор раздела в качестве переменной - мне нужно интерпретировать это в код jquery.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
При первом запуске цикла for код .contents().unwrap()...etc захватывает все элементы с классом «headline_title» и перемещает их в навигацию, заключая их в ссылку. Но, конечно, в каждой ссылке, которую вы создаете для обертывания каждого перемещенного элемента, используется первый элемент из all, который называется «Новости».
В следующий раз, когда цикл повторится, .contents() больше нечего будет захватывать, поэтому ничего не происходит.
Вместо этого, поскольку .wrap() дает нам возможность использовать функцию обратного вызова, контекстная переменная this которой представляет текущий элемент в сопоставленном наборе, мы можем полностью отказаться от all и цикла:
$('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap(function() {
return '<li><a class = "menu-link" href = "#' + $(this).text() + '" ></a></li>';
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class = "headline_title">News</h1>
<h1 class = "headline_title">Gallery Title</h1>
<h1 class = "headline_title">tyest</h1>
<div id = "newsletter-nav">
<ul>
</ul>
</div>Документация: https://api.jquery.com/wrap/
Сработало удовольствие - я также обновил это $(this).text().replace(/ /g, "-").toLowerCase(), и теперь все работает как надо. Здоровья, приятель.
Очень сложно вам помочь, пока мы не увидим содержимое
all. Пожалуйста, предоставьте выводconsole.info(JSON.stringify(all));, тогда мы сможем получить данные в удобном для использования формате. (Если это слишком долго, просто предоставьте разумный образец).