Question

如何使用jQuery（或vanilla JS或CSS）选择以下范围？

<span style="vertical-align:bottom">

扭曲的是我无法在跨度上放置一个类或以其他方式修改HTML，因为这个跨度是由一个不稳定的CMS输出的。

另一个转折点是它不是td中的第一个跨度，因此使用类似td＆gt; span或其他东西来定位CSS会很棘手。我想我可以按照路径并通过一些长串选择器用CSS选择它，但它是一个td内的跨度，但是td就像表中第二个tr中的第三个td。这是一个更好的选择方式吗？我需要做的就是删除该样式或使其成为vertical-align：top。

那么我可以使用jQuery根据style属性中的内容选择一个元素吗？我会担心，如果它是以后在页面上唯一具有该样式的元素，那么这就是让我陷入困境的部分。

我可以这样做吗？

span[style*="bottom"]

Answer 1

var $targets = $("span[style^='verticial-align:']"); //returns all spans with vertical align set

Answer 2

<强> Jquery的：

您可以使用上述的$("span[style^=vertical-align]")。

如果你想只定位第一个或第二个等，你可以添加：

/*first span element that has this attribute and property*/
$("span[style^=vertical-align]").eq(0);

CSS 3

同样的想法：

span[style^=vertical-align] {
     some properties
}

Answer 3

两个选项：

$('span[style*="vertical-align:bottom"]');

JS Fiddle demo

[style*="vertical-align:bottom"]查看元素的style属性是否包含（不是开头）字符串vertical-align:bottom（稍微更可靠）而不是简单地使用starts-with* (样式^ =“vertical-align：bottom”]`）选择器。

虽然这取决于是否存在空白区域（请注意，在演示中（上图），它无法选择第一个元素）。或者您可以使用以下内容：

$('span[style]').filter(function(){
    return this.style.verticalAlign === 'bottom';
});

JS Fiddle demo

以上演示使用以下HTML：

<span style="vertical-align: bottom">This has <code>style="vertical-align: bottom"</code></span>
<span style="vertical-align:bottom">This has <code>style="vertical-align:bottom"</code></span>
<span>This span has no style attribute at all</span>
<span style="color:#f00;vertical-align:bottom">This has <code>style="color:#f00;vertical-align: bottom"</code></span>

参考文献：

如何使用jQuery选择此元素：<span style =“vertical-align：bottom”> </span>

3 个答案: