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

Answer 1

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"});
  }
});

Answer 2

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

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

Answer 3

您需要找到页面上的所有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而不是类。您可以轻松更改这些和选择器以获得所需的结果。

Answer 4

您需要将这些ID更改为类

＆＃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;

jQuery将css应用于id为x

4 个答案: