在 PHP 完成之前运行的 jQuery [关闭]答案

【问题标题】：jQuery running before PHP has finished [closed]在 PHP 完成之前运行的 jQuery [关闭]
【发布时间】：2013-01-11 01:28:45
【问题描述】：

我在 PHP 中有一个for 循环，它创建了四个div，每个都包含一个img 和p 字符串，如下所示：

<div class="guest-tile-holder">             
    <img class="guest-tile" src="<?php echo($tile); ?>">
    <p><span><?php echo($fn.' '.$ln); ?></span></p>
</div>

在 jQuery 中，我想每隔四个将p 着色为黑色，即只有第四个框创建的p 字符串，如下所示：

$(document).ready(function() {
    $('p:nth-child(4)').css('color', 'black');
});

我希望 PHP 会进行预处理，如上创建四个 div，然后 jQuery 会将第四个 div 中的 p 字符串涂成黑色。然而，实际发生的事情是 jQuery 似乎忽略了 PHP 并为我的 HTML 中的另外三个 p 字符串着色 p 字符串。

我总是被引导相信 PHP 会进行预处理，因此我不明白为什么 jQuery 似乎在 PHP 完成之前运行。

谁能告诉我在 PHP 完成后如何让 jQuery 运行？

【问题讨论】：

是的，您的客户端代码在服务器端代码完成之前运行，这很酷！问题可能是段落不是您应该定位的元素，父 div 是，因为那是索引所在的位置
@Ryan 你能告诉我如何让 jQuery 在 PHP 完成之前运行吗？！
@JonathanRomer - 不！ OP误解了正在发生的事情。在您至少尝试弄清楚发生了什么之前，切勿尝试破解某些东西。
你为什么不试着把你的jquery放在php代码之后？
@user1463541 - +1 全天最佳评论，真的让我崩溃了吗？

标签： php jquery css css-selectors

【解决方案1】：

索引基于同一父元素中的元素，因此您需要定位父 div 元素，如果它们在 DOM 中处于同一级别，并在该元素上使用 nth-child 选择器，然后找到该段落并将其更改为 CSS ：

$('div.guest-tile-holder:nth-child(4)').find('p').css('color', 'black');

【讨论】：

【解决方案2】：

您的 jQuery 在您的 PHP 代码之后正确执行，只是您没有选择正确的p。

p:nth-child(4) 将选择层次结构中第四个元素的段落。例如，第一个p 将是第三个元素，因为它前面有一个div 和一个img。你真正在寻找的是 p:nth-of-type(4) 或 .guest-tile-holder:nth-child(4) 甚至使用 jQuery 的自定义 :eq() 选择器：

$('.guest-tile-holder:eq(3) p').css('color', 'black');

（由于 JavaScript 数组使用从零开始的索引，因此第 4 个元素的索引为 3。）

【讨论】：

谢谢。最后你的解释比示例代码更重要。我想我只需要了解nth-child 是如何工作的，然后我就会开始相信它不像我希望的那样工作。谢谢。

【解决方案3】：

无需使用find，只需这样做：

$('div.guest-tile-holder:nth-child(4) p').css('color', 'black');

【讨论】：

.find() 示例的极大简化。