使用 jquery 选择和设置奇数组合项目的样式

Posted 2023-03-05

【中文标题】使用 jquery 选择和设置奇数组合项目的样式

【英文标题】：selecting and styling odd numbered portfolio items using jquery

【发布时间】：2019-10-29 16:10:07

【问题描述】：

我正在尝试重新排序奇数组合项目的模块标题和组合图像。你可以查看我的沙盒here。

我虽然下面可能会工作，但没有骰子。

jQuery(document).ready(function($) 
    if ( $( this ).is(".et_pb_portfolio_item:nth-child(2)") ) 
        $(".et_pb_module_header").insertBefore(".et_portfolio_image");
    
);

我似乎不能只针对模块的标题和图像，它捕获了所有内容。

【问题讨论】：

不要使用2，使用odd

【参考方案1】：

您可以使用此代码

jQuery(document).ready(function($)
    $('.et_pb_portfolio_item:nth-child(odd)').each(function()
        $(this).find(".et_pb_module_header").insertBefore(".et_portfolio_image");
    );
);

【讨论】：

这很接近，但它会从页面中获取所有标题并放在图像之前。我想我必须对每个单独的项目进行查询（即第二个、第四个和第六个等），所以它只需要那个项目的标题？

【参考方案2】：

不要使用:nth-child(2)，它只能选择2nd 元素。

使用:nth-child(odd) 选择块的所有奇数属性。

jQuery(document).ready(function($)
    $('.et_pb_portfolio_item:nth-child(odd)').each(function()
        $(this).find(".et_pb_module_header").insertBefore(".et_portfolio_image");
    );
);

欲了解更多信息，请访问

https://www.w3schools.com/cs-s-ref/sel_nth-child.asp https://www.w3.org/Style/Examples/007/evenodd.en.html

【讨论】：

我相信:nth-child(even) 更适合这种情况。

是的，你也可以那样做！！但 OP 想要奇怪的情况

这很接近，但它会从页面中获取所有标题并放在图像之前。我想我必须对每个单独的项目进行查询（即第二个、第四个和第六个等），所以它只需要那个项目的标题？是的，完全说得很奇怪——在屏幕上呆了这么久我自己都糊涂了：）

我也试过 jQuery(document).ready(function($) $('.et_pb_portfolio_item:nth-of-type(2)').each(function() $( this).find(".et_pb_module_header:nth-of-type(2)").insertBefore(".et_portfolio_image:nth-of-type(2)"); ); );它从第二个项目中获取标题，然后将其放在第二个项目的图像之前（YAY），但也放在其他所有项目的图像之前（BOO）。