Получение идентификатора дочерних элементов и добавление к родителю - PullRequest
Новая
       2

Получение идентификатора дочерних элементов и добавление к родителю

1 голос
/ 31 января 2011

У меня есть функция, которая создает элементы HTML из поля выбора, чтобы разрешить стилизацию.Вот код: 

$.fn.jqTransSelect = function () {
    return this.each(function (index) {
        var $select = $(this);
        if ($select.hasClass('jqTransformHidden')) {
            return;
        }
        if ($select.attr('multiple')) {
            return;
        }
        var oLabel = jqTransformGetLabel($select);
        var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
            zIndex: 10 - index
        });
        $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
        var $ul = $('ul', $wrapper).css('width', $select.width() + 10).hide();
        $('option', this).each(function (i) {
            var oLi = $('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>');
            $ul.append(oLi);
        });
        $ul.find('a').click(function () {
            $('a.selected', $wrapper).removeClass('selected');
            $(this).addClass('selected');
            if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) {
                $select[0].selectedIndex = $(this).attr('index');
                $select[0].onchange();
            }
            $select[0].selectedIndex = $(this).attr('index');
            $('span:eq(0)', $wrapper).html($(this).html());
            $ul.hide();
            return false;
        });
        $('a:eq(' + this.selectedIndex + ')', $ul).click();
        $('span:first', $wrapper).click(function () {
            $("a.jqTransformSelectOpen", $wrapper).trigger('click');
        });
        oLabel && oLabel.click(function () {
            $("a.jqTransformSelectOpen", $wrapper).trigger('click');
        });
        this.oLabel = oLabel;
        var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper).click(function () {
            if ($ul.css('display') == 'none') {
                jqTransformHideSelect();
            }
            if ($select.attr('disabled')) {
                return false;
            }
            $ul.slideToggle('fast', function () {
                var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
                $ul.animate({
                    scrollTop: offSet
                });
            });
            return false;
        });
        var iSelectWidth = $select.outerWidth() + 15;
        var oSpan = $('span:first', $wrapper);
        var newWidth = (iSelectWidth > oSpan.innerWidth()) ? iSelectWidth + oLinkOpen.outerWidth() : $wrapper.width();
        $wrapper.css('width', newWidth);
        $ul.css('width', newWidth - 7);
        oSpan.css({
            width: iSelectWidth
        });
        $ul.css({
            display: 'block',
            visibility: 'hidden'
        });
        var iSelectHeight = ($('li', $ul).length) * ($('li:first', $ul).height());
        (iSelectHeight < $ul.height()) && $ul.css({
            height: iSelectHeight,
            'overflow': 'hidden'
        });
        $ul.css({
            display: 'none',
            visibility: 'visible'
        });
    });
};

То, что я хочу сделать, это взять идентификаторы оригинальных полей выбора до того, как они будут скрыты, и добавить их классы задницы во вновь созданную оболочку $ - как бы я это сделалэто?

Спасибо, Крис

1 Ответ

1 голос
/ 31 января 2011

После: 

    var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
        zIndex: 10 - index
    });

Введите: 

    $wrapper.addClass($select.attr('id'));

Вот пример.

...