Question

如果元素向左或向右浮动，我正在使用的CMS似乎不会应用类名。我希望不必弄乱TinyMCE代码，而是用jQuery做这件事。

现在，当我将图像向左或向右对齐时，它会将图像与图像内联添加，如下所示：

<img src="image.jpg" style="float:left">

我希望对于那些应用了这种风格的元素，我可以添加一个类名“alignleft”。我试过这个，但它不起作用：

$( 'a[ style=' + 'float: left;' + ']' ).addClass( 'alignleft' );

思想？

Answer 1

我建议选择可能float: left的可能元素，然后过滤以找到的那些元素，并将alignleft的类名添加到这些元素：

$('a, img').filter(function(){
    return this.style.float === 'left';
}).addClass('alignleft');

此方法避免要求style属性必须开始，并且完全，style="float: left;"，包括精确的白色 - 空间。

当然，这种方法确实要求在内联float: left属性中分配style;如果有可能在样式表中分配它，无论是在外部还是在页面的head中，那么你必须使用jQuery的css()方法（可以调用getComputedStyle()}或currentStyle()解析这些样式表（除非你自己想这样做），导致：

$('a, img').filter(function(){
    return $(this).css('float') === 'left';
}).addClass('alignleft');

参考文献：

Answer 2

尝试在=符号之后和关闭]符号之前加上双引号。应使用style~=代替=符号。这意味着style属性包含float：left string。

$( 'a[ style~="' + 'float: left;' + '"]' ).addClass( 'alignleft' );

以下是jsFiddle中的工作示例。

对于那些关心的人：

如果您认为float: left或float:left无法通过属性选择器进行区分。看这个：

$( 'a[style*="' + 'float:left' + '"], a[style*="' + 'float: left' + '"]' ).addClass( 'alignleft' );

这适用于所有空间或空间。如果您不了解我想在此解释的内容，请参阅here。当然，一些安装了curvehands.dll的开发人员可以说它不适用于属性参数中的多个空格。可以考虑使用他们喜欢的东西，并在他们想要的时候给出答案。

修改详细了解选择器here。

Answer 3

$('img[style*="float"][style*="left"]').addClass('alignleft');

http://jsfiddle.net/rzp79/

编辑好吧，如果您还有border-left，则无法使用它。

基于样式属性添加类

3 个答案: