javascript - jQuery - 从元素中获取 CSS 值

Question

我正在搜索一个容器来获取像这样的匹配元素的填充..

padding = $( ".container" ).find( ".set_height" ).css( "padding-top" );

console.log(padding);

.set_height {
    padding-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

	<div class="section">
		<div class="match_height">
      Section 1
		</div>
	</div>

	<div class="section">
		<div class="match_height">
      Section 2
		</div>
	</div>

	<div class="section">
		<div class="set_height">
     Section 3
		</div>
	</div>

</div>

set_height div 也可能是fixed_height 或dynamic_height

我如何修改 jQuery 以搜索其中一个并在找到一个时停止，所以如果有多个那么它只会获取它找到的第一个的值？

Answer 1

http://api.jquery.com/multiple-selector/

您可以将类列表作为选择器传递。

var padding = 0;
var items = $( ".container" ).find( ".set_height, .fixed_height, .dynamic_height");
if (items.length) {
    padding = items[0].style.paddingTop; 
}

---

编辑

@segu 是对的(谢谢)，但是仅仅调用 first() 是不够的，你必须检查 first().style 的结果是否是undefined，因为如果没有找到结果，调用first().style.paddingTop会触发Uncaught TypeError: Cannot read property 'paddingTop' of undefined .我只是使用了 length 属性。