Home C C++ Java Python Perl PHP SQL JavaScript Linux Selenium QT Online Test

Home » Forum » x-Forum » Question

Insert a tag before another tag HTML + JS/jQuery

I've almost completed a landing page and due to time shortages etc. I had to make do with simple links on mobile instead of a "burger menu". I've got a few issues and the easiest fix would be to simply add a div before and after my links. 

TL;DR I need this:

    <a href="#dtt" clas="link-class">Link 1</a>
    <a href="#dtt2" clas="link-class">Link 2</a>
    <a href="#dtt3" clas="link-class">Link 3</a>

to become this:

    <div>
    <a href="#dtt" clas="link-class">Link 1</a>
    <a href="#dtt2" clas="link-class">Link 2</a>
    <div>
    <a href="#dtt3" clas="link-class">Link 3</a>

I've already tried with .insertBefore() in jQuery but it makes those 2 links between divs to repeat themselves from top to bottom.

THIS was for StackOverflow but they downvoted my question and closed it .... sorry if this seems stupid or something...anyway....for THAT there was a suggestion to use .wrapAll() and it worked okay....the first time...now I've tried a second time.

This line: 
    if ($(window).width() < 400)
    {
	$('a:contains("Baze de date"), a:contains("Cursuri"), a:contains("Despre")').wrapAll('<div>');
    }

gives me this: https://ibb.co/DkW9H9z ... notice the items underlined....there's supposed to be only one....like here: https://ibb.co/QNDKx2Q .... 

This is the HTML. 
            <div class="container colored-container-header">
                <div class="row cnt-ft">
                    <a href="#web" class="header-links">Baze de date</a>
                    <a href="#courses" class="header-links">Cursuri</a>
                    <a href="#comp-desc" class="header-links">Despre</a>
                    <a href="tel:+37360446575" class="header-links">+373 690 917 30</a>
                </div>
            </div>

On devices with a width less than 400px, this is how the HTML should look:

            <div class="container colored-container-header">
                <div class="row cnt-ft">
                    <div>
                        <a href="#web" class="header-links">Baze de date</a>
                        <a href="#courses" class="header-links">Cursuri</a>
                        <a href="#comp-desc" class="header-links">Despre</a>
                    </div>
                    <a href="tel:+37360446575" class="header-links">+373 690 917 30</a>
                </div>
            </div>

Is this a bug in my jQuery?

Posted by ImOnTop11 2020-08-31 13:02:18

No Ans Posted

Please login to comment

Log In


Ask New Question