jquery - 将功能应用于特定元素

Question

我知道这是基本的东西，但我就是想不通......

如何将 css 更改应用于多个元素？目前，它只适用于第一个，但没有显示错误。

function elemInit(){

    var elem1 = jQ('#elem1');
    var elem2 = jQ('#elem2');

    jQ(elem1, elem2).each(function(){
        jQ(this).css({
            'margin-left': '-' + jQ(this).width()/2 + 'px'
        });
    });

};

elemInit();

jQ是为了确保没有冲突。

Answer 1

jQuery 选择器像 CSS 选择器一样工作，方法内部也css使用each方法，您可以编写代码：

jQ('#elem1, #elem2').css('marginLeft', function(i, oldMarginLeft) {
     return '-' + jQ(this).width()/2 + 'px';
});

Answer 2

var jQelem1and2 = jQ('#elem1, #elem2');

jQelem1and2.each(function(){
    jQ(this).css({
        'margin-left': '-' + jQ(this).width()/2 + 'px'
    });
});

还是我错过了什么？

Answer 3

您用来连接两个 jQuery 对象的语法 -- $($obj1, $obj2)-- 不正确；它做了一些完全不同的事情。

除了通过直接匹配您需要的元素来工作的其他解决方案之外，一般解决方案是使用.add：

$obj1.add($obj2).each(...)

最后，这里真的没有必要.each——.css直接也可以。

Answer 4

试试这个

var elem1 = '#elem1';
var elem2 = '#elem2';  
jQ(elem1, elem2).each(function(){
    jQ(this).css({
        'margin-left': '-' + jQ(this).width()/2 + 'px'
    });
});