Question

我有一个从选择框中创建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'
        });
    });
};

我想要做的是在隐藏原始选择框之前获取ID，并将它们添加到新创建的$ wrapper中 - 我将如何执行此操作？

谢谢，克里斯

Answer 1

之后：

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

把：

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

Here is an example.

获取子元素的ID并附加到父元素

1 个答案: