Question

我在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会将第四个p中的div字符串涂成黑色。然而，实际上发生的事情是，jQuery似乎忽略了PHP，并在我的HTML中将p字符串着色为另外三个p字符串。

我总是认为PHP会预先处理，因此我不明白为什么在PHP完成之前jQuery似乎正在运行。

有人能告诉我如何在PHP完成后运行jQuery吗？

Answer 1

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

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

Answer 2

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

p:nth-child(4)将选择层次结构中第4个元素的段落。例如，第一个p将是第3个元素，因为它前面有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。）

Answer 3

无需使用find，您可以简单地执行：

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

在PHP完成之前运行的jQuery

3 个答案: