Question

I am dynamically creating spans appended to new inputs. If the title input has certain children who are visible I want the new input children to also have those classes visible.

I want something like:

var visibleClass = $('#titlediv').children().is(':visible').each('.class');

$('#newinput').children('span').hasClass('.' + visibleClass).show();

Here is an example of code from the function that creates the new input and div. In this example ‘.catsadd’ refers to the variable all images which all have the class catsadd and also have their own unique class:

var item = $('<input />');

item.attr({'type':'text', 'size': '33px' , 'class':'inputItem' , 'id':'item' + nextItemId })

.appendTo('#itemDiv' + nextItemId);



    //Create Span for category selections

$('<span />').attr({'class':'dynamiccat' , 'id':'categorydiv' + nextItemId})

.prependTo('#itemDiv' + nextItemId);

$('#categorydiv' + nextItemId).append(allimages);

$('.dynamiccat').hide();

$('.catsadd').hide();

Thanks in advance for any help!

Answer 1

If I got you right, you want to get all the classes of the visible elements:

var visibleClasses = $('#titlediv :visible[class]').map(function(){
    return this.className.split(\s);
}).get();

Direct children:

var visibleClasses = $('#titlediv > :visible[class]').map(function(){
    return this.className.split(\s);
}).get();