Как узнать номер элемента div внутри div?

Question

[KGZVER]

Есть например вот такой вот JSX element, необходимо пронумеровать каждый 'item-title' по иерархии его расположения внутри главного div. Сейчас я написал вручную, но это не правильный вариант, ибо вид зависит от бека.

<div className='settings' id='settings'>
            <div className='settings_item'>
                <h3 className='item-title'>1. Почта </h3>
                <div className='item_content'>
                    ..content
                </div>
            </div>
           <div className='settings_item'>
                <h3 className='item-title'>2.Телефон </h3>
                <div className='item_content'>
                    ..content
                </div>
            </div>
</div>

Попробовал сделать так, но код не работает.

const settingContent = document.getElementById('settings')

    useEffect(() => {
        settingContent?.childNodes.forEach((item, key) => {
            const div = document.createElement('div')
            div.innerHTML = `${key}`
            console.log(item.childNodes.item(0))
            item.childNodes.item(0).appendChild(div)
        } )
    }, [])

Comments

[Сергей Сергей]

Id без safety в разметке.
Console.log после добавления чтобы увидеть.

[KGZVER]

Сергей Сергей, ошибка в оформлении, ссори

Answer 1

[andand44]

Можно сделать без js, только с помощью стилей, используя псевдоэлементы
https://jsfiddle.net/oygt1c8s/1/

Comments

[KGZVER]

спасибо огромное)

Answer 2

[Юрий Костин]

Исходя из вопроса, ответ скорее всего "нет", но вы этот JSX своими руками выводите?

И если всё-таки нет, то попробуйте

useEffect(() => {
        settingContent?.querySelectorAll('.item-title').forEach((item, index) => {
                item.textContent = `${index + 1}. ${item.textContent}`
        })
    }, [])

UPD:
Только-только осознал, что раз jsx, значит скорее всего реакт, а значит имена классов дополняются разными хешами, и доступ к элементам можно получить через ref

Но вариант с css гораздо лучше и правильнее =)

Comments

[KGZVER]

спасибо, помогло.
Буду использовать вариант с css)