jQuery将css应用于id为x

时间:2017-04-27 16:44:54

标签: javascript jquery html css

我的目标是将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应用于标识为winddir_text的第一个元素。有没有人知道如何解决这个问题?

4 个答案:

答案 0 :(得分:2)

iN这种情况下你应该使用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"});
  }
});

答案 1 :(得分:2)

尝试以下代码并使用class作为处理程序而不是ID。

$('p').each(function(){
    if( parseInt($(this).text()) > 9) {
    // $(this).css();
   }
});

答案 2 :(得分:0)

您需要找到页面上的所有p元素,然后通过它们全部查看。 jQuery为此提供了一个函数:$.each

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

这只会影响第一个#windir_text,因为您使用的是ID而不是类。您可以轻松更改这些和选择器以获得所需的结果。

答案 3 :(得分:0)

您需要将这些ID更改为类

&#13;
&#13;
$(document).ready(function() {
  var ps = $(".winddir_text");
  $(ps).each(function() {
    var len = $(this).text().trim().length;
    if (len > 1) {
      $(this).css({
        top: "33px",
        left: "32px",
        "font-size": "30px"
      });
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 -->
&#13;
&#13;
&#13;