Hi, I'm having a problem with selecting only the first child of my content tree.

What I have is

<div id="Ft">
	<ul class="Ft_colum">
            <li><h3><a href="#">Home</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>
	<ul class="Ft_colum">
            <li><h3><a href="#">News</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>
	<ul class="Ft_colum">
            <li><h3><a href="#">Contact</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>
	<ul class="Ft_colum">
            <li><h3><a href="#">Projekti</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>
	<ul class="Ft_colum">
            <li><h3><a href="#">Materijali</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a>
                    <ul>
			<li><a href="#">Gallery</a></li>
			<li><a href="#">Gallery</a></li>
		</ul>
            </li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>
</div>

And now I'm having problems with adding the <h3> tag ONLY to first 'li a' not the nested 'li a' too.

I've been trying to do this by adding this code

// Footer
	$('div#Ft > ul').removeClass('CMSListMenuUL').addClass('Ft_colum').find('li:nth-child(1) a').wrap('<h3 />');

or

// Footer
	$('div#Ft > ul').removeClass('CMSListMenuUL').addClass('Ft_colum');
	$('div#Ft > ul.Ft_colum > li').each(function() {
			$(this).wrapInner('<h3 />');
			});

but that code puts <h3> tag to each 'li a', and I wants it only to put it on first 'li a', not on the 'li ul li a' also. I don't want this to happen.

<ul class="Ft_colum">
            <li><h3><a href="#">Materijali</a></h3></li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a>
                    <ul>
			<li><h3><a href="#">Gallery</a></h3></li>
			<li><h3><a href="#">Gallery</a></h3></li>
		</ul>
            </li>
            <li><a href="#">Demo link</a></li>
            <li><a href="#">Demo link</a></li>
        </ul>

Of course I have jQuery library ;)

Please help cause I don't have any ideas anymore


Thank you very much

Recommended Answers

All 2 Replies

OK, I found some stupid solution that seems to work.
I also added class 'first' to first li

// Footer
	$('div#Ft > ul').removeClass('CMSListMenuUL').addClass('Ft_colum');
	$('div#Ft > ul.Ft_colum > li.first a').not('ul.Ft_colum > li.first ul li a').wrap('<h3 />');

But I'm open for some 'prettier' solution :)

This handles setting the <h3> tags the way you want.

$('#Ft > ul > li:first-child a').wrap('<h3 />');
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.