jQuery: Append HTML if tag contains specific class

Question

I think this should be fairly simple to do, but Google isn't producing any results so hopefully someone here might be able to help.

Using jQuery I want to append some HTML inside an element if it contains a ul with a specific class.

So if a "main-menu li" element contains "ul.sub-menu" I want to append the "expand" div inside the "main-menu li" element which contains it.

Here's the HTML I'm working with: http://pastebin.com/4pwN9Rte

Any help much appreciated!

Answer 1

try this

 if($("main-menu li ul").hasClass("sub-menu")){
      $("main-menu li").append("#expand");
 }

hope it would work

Answer 2

Try this:

$('.main-menu > li').find('ul.sub-menu').parent('li').append($('<div/>').addClass('expand'));

Explanation:

Take the li childs of the .main-menu list, find the ul sub-menu and append a new div with class expand to its parent li element.

OR the shorter version:

$('.main-menu > li:has(ul.sub-menu)').append($('<div/>').addClass('expand'));

Here is a jsfiddle to show: http://jsfiddle.net/03j5fkyh/1/

Answer 3

Very easy, indeed! cheers! CODEPEN

$('li:has(.sub-menu)').prepend('<div class="expand">asdfasdfasdf</div>');