Jquery loop through each li for each ul

html, javascript, jquery

Solution

Use a separate loop for the `ul`

$('.sampleAddress').each(function () {
    var list = $(this).find('li span');
    $(list.get().reverse()).each(function () {
        var currentLine = $(this).html();
        var unmatched = unmatchedLine;
        if (currentLine.indexOf(unmatched) !== -1) {
            $(this).html($(this).text().replace("  ", " ").replace("&", "&AMP;").replace(unmatchedLine.toUpperCase(), '<span class="matchedClass">' + unmatchedLine.toUpperCase() + '</span>'));
            return false;
        }
    });
})

Problem

Currently have a loop like this which goes through each li, and looks for certain content in the Li and adds a class. The problem is that the layout has multiple UL's i.e. So I want it to find the li within each of the UL's. Right now it stop the first instant it finds any li with matches my IF criteria. ``` var list = $('.sampleAddress li span'); $(list.get().reverse()).each(function () { var currentLine = $(this).html(); var unmatched = unmatchedLine; if (currentLine.indexOf(unmatched) !== -1) { $(this).html($(this).text().replace(" ", " ").replace("&", "&AMP;").replace(unmatchedLine.toUpperCase(), '<span class="matchedClass">' + unmatchedLine.toUpperCase() + '</span>')); return false; } }); ``` Layout of HTML is as follows ``` <ul class="boxSlider"> <li> <ul class="sampleAddress"> <li><span>something</span></li> <li><span>something</span></li> <li><span>something</span></li> </ul> </li> <li> <ul class="sampleAddress"> <li><span>something</span></li> <li><span>something</span></li> <li><span>something</span></li> </ul> </li> </ul> ```

Original source