使用jQuery设置动态加载元素的样式

我的页面使用Ajax用数据库中的选项填充组合框。每次选项更改时，组合框的宽度也会更改，以匹配最长选项的宽度。从演示的角度来看，这很烦人，因此我想做以下几点：

首先，在页面加载时，我使用jQuery查找相关组合框的宽度：

$(window).load(function(){
    var box_width = $('select#imgClass').width();           
});

但是我被卡住了。我试着使用

$（'select#imgClass'）.css（'width'，box\u width）

设置宽度，但这仅设置组合框当前迭代的宽度，而不是任何未来版本。我曾考虑过使用

.live（）

，但由于这需要一个事件处理程序，它也无法工作

我最后的办法是使用

.append（）

在页面头部创建CSS规则，但我想问大家，是否有更好的方法可以做到这一点，我不知道

谢谢。

请阅读

做一些你认为完全不同的事情

请阅读

做一些你认为完全不同的事情

---

当DOM就绪时，您可以获得组件的宽度。然后，您可以使用它来更新组合框，而不管它动态地发生了什么：

    $.ready(function() {

        // set up closure scope
        var fixedWidth = $('select#imgClass').width();

        // set up 'change' event handler to update the width using fixed width
        $('select#imgClass').live('change', function () {
            $(this).width(fixedWidth);
        ));

    });

更新

您提到您正在进行AJAX调用，以响应组合框的

change

事件，这将导致我的原始解决方案出现问题。但是，为了成为一个好的网络公民，您可以在全局空间中放置一个对象，该对象可以具有“固定”的几何体值。然后您的ajax调用可以访问该值，如下所示：

    $.ready(function() {

        // set up global object to hold your fixed geometries
        MyGeometryValues = {};
        MyGeometryValues.imgClassSelect = $('select#imgClass').width();

    });

    $.get('/path/to/my/url', function(data) {  // success handler of AJAX call

        // do all of your other processing first

        // then, do this last
        $('select#imgClass').width(MyGeometryValues.imgClassSelect);

    )};

---

当DOM就绪时，可以获得组件的宽度。然后，您可以使用它来更新组合框，而不管它动态地发生了什么：

    $.ready(function() {

        // set up closure scope
        var fixedWidth = $('select#imgClass').width();

        // set up 'change' event handler to update the width using fixed width
        $('select#imgClass').live('change', function () {
            $(this).width(fixedWidth);
        ));

    });

更新

您提到您正在进行AJAX调用，以响应组合框的

change

事件，这将导致我的原始解决方案出现问题。但是，为了成为一个好的网络公民，您可以在全局空间中放置一个对象，该对象可以具有“固定”的几何体值。然后您的ajax调用可以访问该值，如下所示：

    $.ready(function() {

        // set up global object to hold your fixed geometries
        MyGeometryValues = {};
        MyGeometryValues.imgClassSelect = $('select#imgClass').width();

    });

    $.get('/path/to/my/url', function(data) {  // success handler of AJAX call

        // do all of your other processing first

        // then, do this last
        $('select#imgClass').width(MyGeometryValues.imgClassSelect);

    )};

---

我认为唯一的方法是在每次更改html运行函数之后，遍历所有元素并设置css。 如：

function SetWidth(value) {
   $('.elements input').each({
   $(this).width(value);
});
}

---

我认为唯一的方法是在每次更改html运行函数之后，遍历所有元素并设置css。 如：

function SetWidth(value) {
   $('.elements input').each({
   $(this).width(value);
});
}

---

虽然下面的Taras Neporozhniy的答案可能确实有效，但我觉得下面的内容最终会更简单，并且允许每个Ajax请求使用更少的代码

下面的代码是针对三个组合框的，而为了简单起见，原始问题只涉及一个组合框。我使用连接使代码更具可读性。哦，虽然我不知道确切的原因，但以下内容只适用于

$（window.load（）

）中的内容

$（document）.ready（）

不起作用，我怀疑这是因为组合框是通过ajax加载的

$(window).load(function(){
    var family_width = $('select#imgFamily').width(),
        class_width = $('select#imgClass').width(),
        gender_width = $('select#imgGender').width();   
    $('head').append('<style type="text/css">'+
                        ' select#imgFamily {width: '+ family_width +'px}'+
                        ' select#imgClass {width: '+ class_width +'px}'+
                        ' select#imgGender {width: '+ gender_width +'px}'+
                        '</style>');
});

$（窗口）.load（函数（）{
var family_width=$（'select#imgFamily'）.width（），
class_width=$（'select#imgClass'）.width（），
性别宽度=$（'select#imgGender'）。宽度（）；
$（'head'）。附加（'+
'选择#imgFamily{width:'+family_width+'px}'+
'选择#imgClass{width:'+class_width+'px}'+
'选择#imgGender{width:'+gender#u width+'px}'+
'');
});

---

感谢那些试图提供帮助的人。

虽然下面的Taras Neporozhniy的答案可能确实有效，但我觉得下面的内容最终会更简单，并且允许每个Ajax请求使用更少的代码

下面的代码是针对三个组合框的，而为了简单起见，原始问题只涉及一个组合框。我使用连接使代码更具可读性。哦，虽然我不知道确切的原因，但以下内容只适用于

$（window.load（）

）中的内容

$（document）.ready（）

不起作用，我怀疑这是因为组合框是通过ajax加载的

$(window).load(function(){
    var family_width = $('select#imgFamily').width(),
        class_width = $('select#imgClass').width(),
        gender_width = $('select#imgGender').width();   
    $('head').append('<style type="text/css">'+
                        ' select#imgFamily {width: '+ family_width +'px}'+
                        ' select#imgClass {width: '+ class_width +'px}'+
                        ' select#imgGender {width: '+ gender_width +'px}'+
                        '</style>');
});

$（窗口）.load（函数（）{
var family_width=$（'select#imgFamily'）.width（），
class_width=$（'select#imgClass'）.width（），
性别宽度=$（'select#imgGender'）。宽度（）；
$（'head'）。附加（'+
'选择#imgFamily{width:'+family_width+'px}'+
'选择#imgClass{width:'+class_width+'px}'+
'选择#imgGender{width:'+gender#u width+'px}'+
'');
});

---

感谢那些试图提供帮助的人。

只要使用常规CSS，它就会应用于所有内容，无论何时添加到DOM。@David Thomas-这就是我想做的，只是因为我希望在CSS中使用的值是可变的，所以需要在页面加载后添加。@stefmikhail，我最初无意中使用了

$.onReady

而不是

.ready

。我更新了我的答案：）@Ryan-Ha，我觉得这有点不对劲……；）只要使用常规CSS，它就会应用于所有内容，无论何时添加到DOM。@David Thomas-这就是我想做的，只是因为我希望在CSS中使用的值是可变的，所以需要在页面加载后添加。@stefmikhail，我最初无意中使用了

$.onReady

而不是

.ready

。我更新了我的答案：）@Ryan-Ha，我觉得这有点不对劲……；）我很好奇你认为它有什么作用？你给我的链接是关于速记ajax方法的。在上面所示的方法中使用时，它用于将事件绑定到窗口加载。这是链接哦，我读过Ajax，只是假设这就是你想的功能，我的错。我很好奇你认为它有什么作用？你给我的链接是关于速记ajax方法的。在上面所示的方法中使用时，它用于绑定