javascript - jQuery 将 css 应用于所有具有 id x 的元素

Question

我的目标是将 css 应用于所有包含多于一位数字的 p 元素，例如:

<p id="winddir_text" >5 </p>    <!-- don't apply css -->
<p id="winddir_text"> 12 </p>   <!-- apply css -->
<p id="winddir_text"> 48 </p>   <!-- apply css -->

我的 jQuery 代码:

$(document).ready(function(){
var pString = $("#winddir_text").text();
var pLength = (pString).length;
if (pLength > 1)
    $("#winddir_text").css({"top": "33px", "left": "32px", "font-size": "30px"});
});

此代码仅将 css 应用于 ID 为 winddir_text 的第一个元素。有人知道如何解决这个问题吗？

Answer 1

在这种情况下，您应该使用 class 而不是 Id 。

<p class="winddir_text" >5 </p>    <!-- don't apply css -->
<p class="winddir_text"> 12 </p>   <!-- apply css -->
<p class="winddir_text"> 48 </p>   <!-- apply css -->

然后使用每个循环定位类。

$(".winddir_text").each(function(){
  var pString = $(this).text();
  var pLength = (pString).length;
  if (pLength > 1)
    $(this).css({"top": "33px", "left": "32px", "font-size": "30px"});
  }
});