Добавить после блока div html код, если в дочерних у него содержится элемент с определенным классом
На странице много блоков подобного вида:
<div class="left">
<div class="icon">
<i class="fa fa-id-card"></i>
</div>
</div>
Нужно найти блок с классом .left, который содержит i class="fa fa-id-card" и добавить именно после этого блока .left какой-нибудь html код.
Ответы (2 шт):
Автор решения: Seep Audenarde
→ Ссылка
const container = document.querySelector('.left')
let lever = false
function checkDeep(block) {
if (block.classList.contains('fa') && block.classList.contains('fa-id-card')) lever = true
if (block.children) {
[...block.children].map(innerBlock => {
checkDeep(innerBlock)
})
}
}
checkDeep(container)
if (lever) container.insertAdjacentHTML("afterend", '<div> filler </div>')
Это решение с использованием рекурсии: идет проходка по всем children - проверяется наличие у них искомых классов и заодно есть ли у них самих children.
Автор решения: ksa
→ Ссылка
Нужно найти блок с классом .left, который содержит i class="fa fa-id-card" и добавить именно после этого блока .left какой-нибудь html код.
Предложу такой вариант для jQuery...
$('.fa.fa-id-card').each((_, e) => {
$(e).parents('.left').eq(0).after('<p>Тест</p>')
})
.left {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<div class="icon">
<i class="fa fa-id-card"></i>
</div>
</div>