Элементы упаковки Jquery
У меня есть некоторый вывод HTML, который мне нужно обернуть новым div (.container). Иногда за span.diary-film-name будут следовать некоторые ссылки a.film-tickets-link. Если ссылки есть, я хочу, чтобы они тоже были завернуты в div .container.
Позвольте мне уточнить, я не могу изменить вывод HTML, отсюда и такой подход.
Я могу обернуть span.diary-film-name, используя строку ниже, но я не уверен в переносе следующих ссылок, если они есть?
$( ".diary-film-name" ).wrap( "<div class='container'></div>" );
Вот что у меня есть:
<span class = "diary-film-name">
<a href = "#">Toy Story 1</a>
</span>
<a class = "film-tickets-link" href = "#">5.20pm</a>
<a class = "film-tickets-link" href = "#">7.40pm</a>
<span class = "diary-film-name">
<a href = "#">Toy Story 2</a>
</span>
Это то, что я хочу отобразить с помощью нового div .container:
<div class = "container">
<span class = "diary-film-name">
<a href = "#">Toy Story 1</a>
</span>
<a class = "film-tickets-link" href = "#">5.20pm</a>
<a class = "film-tickets-link" href = "#">7.40pm</a>
</div>
<div class = "container">
<span class = "diary-film-name">
<a href = "#">Toy Story 2</a>
</span>
</div>
Я делаю это, чтобы удалить контейнер, если внутри нет ссылок .film-ticket-links, т.е.
$('.container').not(':has(.film-tickets-link)').remove();
Редактировать:, единственное, что я могу сделать, это добавить <бр> до и после интервала. Это единственное изменение, которое я могу внести в исходный вывод:
$('.my-page br').each(function(){
$(this).nextUntil('.my-page br').wrapAll(document.createElement('div'));
});
Мне удалось решить это...
$(".diary-film-name").each(function(){
$(this).nextUntil(".diary-film-name").andSelf().wrapAll('<div class = "container"> </div>')
})
Нет, потому что ссылка .film-tickets-tickets не содержится. Я не могу отобразить контейнер div из источника, поэтому мне нужно сделать это с помощью JQuery.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
РЕДАКТИРОВАТЬ Редактируется с каждым()
Поскольку вы сказали, что HTML нельзя редактировать, я добавлю чистое решение jquery: Во-первых, сделайте это, как вы делали, это создаст эту структуру:
<div class = "container">
<span class = "diary-film-name">
<a href = "#">Toy Story 1</a>
</span>
</div>
<a class = "film-tickets-link" href = "#">5.20pm</a>
<a class = "film-tickets-link" href = "#">7.40pm</a>
Итак, мы оборачиваем контейнер, затем выбираем все элементы того же уровня, что и класс .film-tickets-link, затем добавляем их в конец контейнера:
var containers = $( ".diary-film-name" ).wrap( "<div class='container'></div>" ).parent();
containers.each(function(index, element){
const links = $(this).nextUntil('.container');
links.appendTo(element);
})
Проблема здесь в классе контейнера, он должен быть уникальным (если нет, он не будет работать, вы можете использовать идентификатор или какое-либо поле данных, которое заполняется из API с уникальным идентификатором) Я не "компилировал" его, так что, возможно, есть какие-то синтаксические ошибки, но с логикой все в порядке.
СТАРЫЙ
Если вы используете контейнер span
.diary-film-name
Если ссылки существуют, и вы оборачиваете их ими, ссылки ниже будут вне контейнера, мой совет, измените структуру HTML, добавьте диапазон в верхней части .diary-film-name, который будет обертывать как имя файла, так и заполнить ссылки
<div class = "container">
<span class = "content-container">
<span class = "diary-film-name">
<a href = "#">Toy Story 1</a>
</span>
<a class = "film-tickets-link" href = "#">5.20pm</a>
<a class = "film-tickets-link" href = "#">7.40pm</a>
</span>
</div>
Тогда вместо
$( ".diary-film-name" ).wrap( "<div class='container'></div>" );
Делать:
$( ".content-container" ).wrap( "<div class='container'></div>" );
У меня проблемы с изменением HTML из-за системы, которую мы используем, поэтому этот подход... Мне нужно сделать какую-то проверку, т.е. начать новую обертку div перед диапазоном, проверить, есть ли ссылки ниже до следующего диапазона, а затем закрыть div после этих перегибов.
@ultrarun, вы можете сделать то, что делаете, а затем повторить ссылки ниже, и если они существуют, переместите их внутрь контейнера, я напишу код через несколько минут, проверю его.
Спасибо, но он закрывает контейнер перед ссылками jsfiddle.net/kdrysdale/6yvgutkL/1
@ultrarun исправил это, проверьте сейчас :)
Это здорово, спасибо, но если я добавлю больше диапазонов, он добавит все ссылки к диапазонам, посмотрите, что я имею в виду здесь: jsfiddle.net/kdrysdale/6yvgutkL/4 Есть ли способ ограничить добавление только ссылок непосредственно под каждым диапазоном в новый контейнер
Кажется, div не закрывается?
С уважением container: у вас может быть больше контейнеров, но вы не можете вкладывать их в соответствии с документацией по начальной загрузке. Итак, ваша структура html в порядке.
Более того, ваш исходный код подходит для достижения желаемых результатов, но если вы хотите иметь только один container и не можете изменить рендеринг структуры html сзади, вы можете сделать это напрямую через Jquery.
Мне удалось решить это...
$(".diary-film-name").each(function(){
$(this).nextUntil(".diary-film-name").andSelf().wrapAll('<div class = "container"> </div>')
})
Я обновил код новым кодом, который теперь работает, если хотите проверить, он немного понятнее, чем ваш.
Ты уже не можешь завернуть?
<div class = "filmContainer"><span class = "diary-film-name"> <a href = "#">Toy Story 1</a> </span> <a class = "film-tickets-link" href = "#">5.20pm</a> <a class = "film-tickets-link" href = "#">7.40pm</a></div>тогда вы можете скрыть все и использовать$("div.filmContainer").has(".film-tickets-link").show()