quitar - obtener el valor del id con jquery

Crear ID para cada<li>(incluidos anidamientos) en una lista ordenable de jQuery

Question

Tengo una lista ordenable con elementos LI anidados. Estoy buscando crear una ID para cada LI en el grupo.

Ejemplo. Si tengo esto:

<li class="main"> Cat 0
    <ul class="subCat">
        <li>Subcat 0
            <ul class="subCat">
                <li>Sub-Subcat 0
                    <ul class="subCat"></ul>
                </li>
            </ul>
        </li>
        <li>Subcat 1</li>
    </ul>
</li>

Ok, esos ul.subCat están ahí para anidar otros elementos de li . Quiero hacer una función para agregar ID a elementos li y sus elementos secundarios li . Esta función será llamada por cada cambio de orden.

El resultado debería ser algo como esto:

<li class="main" id="cat_0"> Cat 0
    <ul class="subCat">
        <li id="cat_0_0">Subcat 0
            <ul class="subCat">
                <li id="cat_0_0_0">Sub-Subcat 0
                    <ul class="subCat"></ul>
                </li>
            </ul>
        </li>
        <li id="cat_0_1">Subcat 1</li>
    </ul>
</li>

Y, para cada elemento de li.main , repita la historia para alcanzar 4 niveles (0 a 3).

Mi código real es este:

// level 0
target = $(''#ulMenu >li'');
for( i=0; i<=target.length-1; i++ ){
    target.eq(i).attr(''id'', ''cat_'' + i).addClass(''main'');
}

// level 1
//------------------------------------------------------------------
$(''#ulMenu >li.main'').each(function(){

    target = $(this).children(''ul'').children(''li'');
    for( i=0; i<=target.length-1; i++ ){
        father = target.eq(i).parent(''ul'').parent(''li'').attr(''id'').split(''_'')[1];
        target.eq(i).attr(''id'', ''cat_'' + padre + ''_'' + i);
    }

Tengo que saber cómo agregar ID s al resto de elementos. Lo estaba intentando pero no puedo encontrar la solución.

Answer 1

Aquí hay una solución recursiva que funcionará a cualquier profundidad que desee:

function menuID(el, base) {
    base = base || ''cat'';
    $(el).filter(''li'').each(function(i) {
        this.id = base + ''_'' + i;
        menuID($(this).children(''ul'').children(''li''), this.id);
    });
};

menuID(''.main'');​

Ver http://jsfiddle.net/alnitak/XhnYa/

Alternativamente, aquí hay una versión como un plugin jQuery:

(function($) {
    $.fn.menuID = function(base) {
        base = base || ''cat'';
        this.filter(''li'').each(function(i) {
            this.id = base + ''_'' + i;
            $(this).children(''ul'').children(''li'').menuID(this.id);
        });
    };
})(jQuery);

$(''.main'').menuID();

Ver http://jsfiddle.net/alnitak/5hkQU/

Answer 2

Algo como esto debería hacerlo ...

$(''#ulMenu'').children(''li'').each(function(cat) {

    $(this).attr(''id'', ''cat_'' + cat).children(''ul'').children(''li'').each(function(sCat) {

        $(this).attr(''id'', ''cat_'' + cat + ''_'' + sCat).children(''ul'').children(''li'').each(function(ssCat) {

            $(this).attr(''id'', ''cat_'' + cat + ''_'' + sCat + ''_'' + ssCat);
        });
    });
});​

Ejemplo: http://jsfiddle.net/6YR5p/2/