分别为页面上的每个div运行javascript代码

我在我的网站上从数据库中提取了一些动态数据

内容将有许多最终将被输出的图像，例如

<img class="buildimage" src="IMAGEURL"></img>
<img class="buildimage" src="IMAGEURL2"></img>
<img class="buildimage" src="IMAGEURL3"></img>

所有图像源都是外部URL，可以是任何大小比，而不是文件大小

我想做的是，当页面加载时，它用buildimage类检查所有div，然后检查它们的大小。如果它高于X数量，它将更改类别，如果不是它的另一个类别

这个

工作正常，但它将页面上的所有图像设置为同一类。我明白为什么，但我只是不知道如何让这个函数分别“运行”每个图像并更改它们的类

图像标记通过以下方式从BB转换为html：

$text = str_replace("[img]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/img]", "'>", "$text");

创建输出类的函数是否更容易/可能？然后把它放在标签里。例如

$text = str_replace("[img]", "<img class='<script>getImageClass()<.script>' src='", "$text");

或者类似的？不确定最简单的解决方法

克雷格

只要使用

只要使用

---

这是jQuery函数的最佳位置

$(document).ready(function() {
  $(".blogtest").find("img.buildimage").each(function(index, img) {
    if (img.width() > 701) {
      img.addClass("buildimage-large");
    } else if (img.width() < 700) {
      img.addClass("buildimage-small");
    }
  });
});

---

这是jQuery函数的最佳位置

$(document).ready(function() {
  $(".blogtest").find("img.buildimage").each(function(index, img) {
    if (img.width() > 701) {
      img.addClass("buildimage-large");
    } else if (img.width() < 700) {
      img.addClass("buildimage-small");
    }
  });
});

您可以使用回调函数，该函数对每个选定元素执行一次：

box.find("img.buildimage").addClass(function() {
   return $(this).width() > 701 
          ? "buildimage-large" 
          : "buildimage-small";
});

您可以使用回调函数，该函数对每个选定元素执行一次：

box.find("img.buildimage").addClass(function() {
   return $(this).width() > 701 
          ? "buildimage-large" 
          : "buildimage-small";
});

---

我注意到您使用jQuery。在这种情况下，应该使用jQuery中的方法

$(document).ready(function () {
    var box = $(".blogtest");
    box.find("img.buildimage").each(function() {
       var img = $(this), width = img.width();
       if (width >= 700) {
          img.addClass("buildimage-large");
       } else if (width < 700) {
          img.addClass("buildimage-small");
       }
    });
});

---

下面是上述代码的一个示例：

我注意到您使用jQuery。在这种情况下，应该使用jQuery中的方法

$(document).ready(function () {
    var box = $(".blogtest");
    box.find("img.buildimage").each(function() {
       var img = $(this), width = img.width();
       if (width >= 700) {
          img.addClass("buildimage-large");
       } else if (width < 700) {
          img.addClass("buildimage-small");
       }
    });
});

下面是上述代码的一个示例：

jQuery有一个非常有用的方法。编辑的答案：

var imageWidthThreshold = 700;

$(document).ready(function() {
  // can combine into one selector statement
  $(".blogtest img.buildimage").each(function(index, img) {

    var image = $(img),
       // get the value and save so as to save time (1 vs 2 invocations)
       imageWidth = image.width();

    if (imageWidth >= imageWidthThreshold ) {
      image.addClass("buildimage-large");
    } else if (imageWidth < imageWidthThreshold ) {
      image.addClass("buildimage-small");
    }

  });
});

jQuery有一个非常有用的方法。编辑的答案：

var imageWidthThreshold = 700;

$(document).ready(function() {
  // can combine into one selector statement
  $(".blogtest img.buildimage").each(function(index, img) {

    var image = $(img),
       // get the value and save so as to save time (1 vs 2 invocations)
       imageWidth = image.width();

    if (imageWidth >= imageWidthThreshold ) {
      image.addClass("buildimage-large");
    } else if (imageWidth < imageWidthThreshold ) {
      image.addClass("buildimage-small");
    }

  });
});

---

我想这里有一个错误我想这里有一个错误谢谢你的回复，虽然没有答案似乎是有效的，我已经在这里做了jsfiddle，所以你可以看到你是否检查了我添加的链接？您必须在结果面板中使用Inspect元素来选择图像。你会注意到，这些类现在已经开始工作了，有一个错误丢失了一个括号，我的错误进一步抛出了一些错误！非常感谢你的帮助！其他答案是错误的，因为每个回调函数中的第二个参数不是jQuery对象，而是HtmleElement。@tavi不是所有答案，请参阅BlackSheep对更专业方法的使用感谢您的回复，虽然没有答案，但我在这里创建了JSFIDLE，以便您可以看到您是否检查了我添加的链接？您必须在结果面板中使用Inspect元素来选择图像。你会注意到，这些类现在已经开始工作了，有一个错误丢失了一个括号，我的错误进一步抛出了一些错误！非常感谢你的帮助！其他答案是错误的，因为每个回调函数中的第二个参数不是jQuery对象，而是HtmleElement。@tavi不是所有答案，请参阅BlackSheep对没有.width方法的DOM元素对象调用.width方法的更专门的方法的用法。使用width属性或创建jQuery对象。您正在对没有.width方法的DOM元素对象调用.width方法。使用width属性或创建jQuery对象。