3

我想知道是否有一种优雅的方式来实现这一点。

我的问题：我需要更改一些已经创建的 div 元素的一些 CSS 属性，并将这些更改也应用于同一类的新创建的元素。

例如：

CSS：

.myDiv{left:100px}

HTML：

<div id="decode_me">
    <div id="div1" class="myDiv">Drink</div>
    <div id="div2" class="myDiv">More</div>
</div>

JS：

$('.myDiv').css('left','50px');
$('#decode_me').append('<div id="div3" class="myDiv">Ovaltine</div>');

前两个 div 将设置为 50，而第三个将回退到 css 特定的 100px。我正在根据一些窗口调整大小事件设置左和宽度，因此似乎创建另一个将左设置为 50 的类不起作用，因为数字会改变。

我查看了 .live 和 .on ，我相信它们需要某种事件来触发它们。每次添加新元素时都没有调用函数来调整所有内容的大小，有没有一种巧妙的方法来做到这一点？我的工作似乎有点大锤。

实际使用：使用 jQuery 1.7.1 在类似 CMS 的框架 (phpFox) 中工作，我创建了一个基本上是表格的东西。这是一堆随着新行的添加而滚动的行。在每一行中，我有 7 个“列”，其中两个总是 50px 宽。其余部分需要调整大小，因为“表格”可以在不加载页面的情况下设置为全屏。

如果有其他解决方案，我很乐意试一试。我从创建一个表格开始，但是除了随着新行的添加而向上滚动之外，样式的数量使它变得非常痛苦。我尝试过使用相对定位的 div，但遇到了文本溢出的问题。我现在已经设置了“行”相对值，所有“列”div 都设置为绝对值，但正如你所看到的，这也带来了很多问题。

我想出的每个解决方案都有些混乱，我认为必须有一种简单的方法来完成我只是想念的这个问题。PHP 的交易员。谢谢阅读！

4

4 回答 4

2

我想你可能想使用 liveQuery：https ://github.com/brandonaaron/livequery

$('div').livequery(function() { 
    $(this).css({left: 100px})
})
于 2012-07-13T04:08:27.353 回答
0

我要做的是定义一个添加 CSS 的函数，立即调用该函数，然后在追加结束时触发该函数。尽管我在这里提到，在这里添加一个新类比动态更改 CSS 对性能更友好。

var myfunction = function() {
    $('.myDiv').css('left','50px');
};

myfunction();

$('#decode_me')
  .append('<div id="div3" class="myDiv">Ovaltine</div>')
  .trigger(myfunction());
于 2013-01-14T19:24:24.597 回答
0

如上所述，livequery 将是一个选项，或者只是将其添加到加载元素的块中。

于 2013-01-14T19:29:58.683 回答
0

您不需要每次都调整所有内容的大小 - 您可以将 jQuery 选择器传递给调整大小函数。你仍然需要自己调用 resize() ，但这不会太糟糕：

function resize($obj) {
    $obj.css('left','50px');
}

// What you had originally
resize($('.myDiv'));

// Create the new element, resize it individually
var $newElem = $('<div id="div3" class="myDiv">Ovaltine</div>');
$('#decode_me').append($newElem);
resize($newElem);
于 2012-07-13T04:13:18.877 回答