Question

stuck on a point with jquery.
I have to loop through several div’s with the same structure and need the text inside the <h1> tag plus every <li> with the class ‘.checked’

<div id="a21315" class="content gradient">
<div class='header gradient'>
    <div class='headimg'></div>
    <h1>Input Shaft Size</h1>
    <div class="minus_sprite "></div>
    <ul class="de-radio ">
        <li id="a22134340"><span class='checked'>0.4375" X 0.88"</li>
        <li id="a22151870"><span class=''>0.500" X 1.13"</li>
        <li id="a22168545"><span class=''>0.625" X 1.50"</li>
        <li id="a22172070"><span class=''>0.625" X 1.57"</li>
        <li id="a22184915"><span class=''>0.750" X 1.57"</li>
        <li id="a22946970"><span class=''>0.875" X 1.97"</li>
    </ul>
</div>

I expect a result like this and wish to copy this in another div (#overview).

Text from Headline 1
-List Element with checked Class 1
-List Element with checked Class 2
-List Element with checked Class 3

Text from Headline 2
-List Element with checked Class 1
-List Element with checked Class 2
-List Element with checked Class 3
etc.

with this $('.content.gradient:not(.hidden) h1').text(); I receive every Headline()
and with this line:
$('.content.gradient:not(.hidden) ul li.checked span').not('.hidden').text();

I received all selected <li> with the .checked class. But how can I loop throught all this and can get it?

I hope I described my problem comprehensible.

Answer 1

But how can I loop throught all this

You could do:

var $overview = $('#overview');
$('.content.gradient:not(.hidden)').find('.header.gradient').each(function(){
    var headingText = $(this).find('h1').text();
    var $checkedItems = $(this).find('span.checked').not('.hidden');
    var checkedItemsText = '';
    $checkedItems.each(function(){
        checkedItemsText += $(this).text() + '<br/>';
    });
    $overview.append(headingText + '<br/>' + checkedItemsText );
});

EDIT:

Sorry, made couple of typos – the above is now correct. Here’s a working demo.

EDIT 2:

For better performance it’s good to cache the #overview – updated the code above.