How to Target Immediate Children in a Nested Sortable List?

Targeting Immediate Children in a Nested Sortable List

In a dynamic and n-level deep sortable list, identifying and targeting only immediate children can be challenging. Common child selectors like "ul > li" and "#parent > li" include all child elements, regardless of their nesting level.

To select immediate children exclusively, use the "ul > li" selector. However, this approach is not supported in IE6.

Workarounds for IE6 Compatibility

For backward compatibility with IE6, consider using the following workaround:

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

This method explicitly applies styles to immediate children and then resets them for nested children.

MooTools-Specific Solution

In your MooTools script, the issue arises from using getElements(), which retrieves all descendants. To target only immediate children, use getChildren() instead:

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
}

The above is the detailed content of How to Target Immediate Children in a Nested Sortable List?. For more information, please follow other related articles on the PHP Chinese website!