带有选择器的 jQuery appendTo()答案

【问题标题】：jQuery appendTo() w/ Selectors带有选择器的 jQuery appendTo()
【发布时间】：2014-07-19 04:45:17
【问题描述】：

所以我在页面中添加了四个与 Wordpress 循环分开的元素。我正在使用 jQuery appendto() 将它们添加到帖子列表中（循环）。它工作正常，除了最后一个......它似乎无法使用 last-child 或 only-child 或 nth-child 来选择它。使用 last-child(#) 选择并完美地移动了其他 3 个元素。我已经尝试了我能想到的一切。你怎么看？

当然，一旦这 3 个元素被移动，我想最后一个左侧不再被视为最后一个孩子或第一个孩子？...但唯一的孩子也不起作用...

jQuery(document).ready(function ($) {
    var toApp1 = $(".recent_updates > .fp_post:nth-child(4)"),
        toApp2 = $(".recent_updates > .fp_post:nth-child(7)"),
        toApp3 = $(".recent_updates > .fp_post:nth-child(10)"),
        toApp4 = $(".recent_updates > .fp_post:nth-child(13)");
    var ad1 = $(".recent_updates > #skippingAds:nth-last-child(4)"),
        ad2 = $(".recent_updates > #skippingAds:nth-last-child(3)"),
        ad3 = $(".recent_updates > #skippingAds:nth-last-child(2)"),
        ad4 = $(".recent_updates > #skippingAds:last");
    ad3.appendTo(toApp3);
    ad2.appendTo(toApp2);
    ad1.appendTo(toApp1);
    ad4.appendTo(toApp4);
});

更新的代码：（仍然不能使用类而不是 ID（好点）

jQuery(document).ready(function ($) {
    var toApp1 = $(".recent_updates > .fp_post:nth-child(4)"),
        toApp2 = $(".recent_updates > .fp_post:nth-child(7)"),
        toApp3 = $(".recent_updates > .fp_post:nth-child(10)"),
        toApp4 = $(".recent_updates > .fp_post:nth-child(13)");
    var ad1 = $(".skippingAds:nth-last-child(4)"),
        ad2 = $(".skippingAds:nth-last-child(3)"),
        ad3 = $(".skippingAds:nth-last-child(2)"),
        ad4 = $(".skippingAds:last-child");
    ad3.appendTo(toApp3);
    ad2.appendTo(toApp2);
    ad1.appendTo(toApp1);
    ad4.appendTo(toApp4);
});

【问题讨论】：

ID 应该是唯一的，所以无论如何应该只有 1 个#skippingAds。
您应该使用一些示例 HTML（最小示例）设置一个 jsfiddle。没有那个很难说。

标签： javascript jquery wordpress jquery-selectors css-selectors

【解决方案1】：

您的文档中似乎有重复的IDs，这导致您的 HTML 无效。当您的 HTML 无效时，您将在浏览器之间获得不一致的行为，因为没有处理无效 HTML 的规范，因此没有浏览器必须遵守该规范。

我建议您将所有skippingAds ID 更改为类，然后您可以使用类选择器。

【讨论】：

这可能不是问题，但您总是希望拥有有效的 HTML。无论如何，您只是想摆脱它。
Nvm ID 是问题，jsfiddle.net/DNLJJ/6 定位 p 可以，但定位 id 不行
这是一个很好的确认。 id 选择器最多返回 1 个元素。当多个元素具有相同的 ID 时，一个浏览器可能会返回第一个，而另一个可能会返回最后一个。
不，即使重复，#ID 在这种情况下也可以正常工作，但是是的，我确实更改了类，因为它更合适。但是，并没有解决主要问题。
拿自己的生命去赌可不好！ :) 你测试了多少浏览器？如果它在浏览器 A 中工作，则无法保证它在浏览器 B 中也能工作。有效的 HTML 是一个很好的基础 :)

【解决方案2】：

尝试最后一个孩子

ad4 = $(".recent_updates > #skippingAds:last-child");

【讨论】：

那应该没什么区别