动态读取类名并配对/追加匹配的div

Question

我看了很多关于单独模仿相同任务的帖子，我得到了基本概念，但我想知道如何将它们整合到一个干净的脚本中。我认为最棘手的部分是从div获取某个类名，解析某个类名并将其与另一个具有匹配字母序列的类名匹配。

为了清晰起见，简化了这种情况：许多具有多个类/单独父母的动态div：

<!— visible - holds filterable portfolio grid of logos —>
<div id="portfolioGrid">
  <div class=“ portfolio_item project_tag-client_name ” > Logo </div>
  <div class=“ portfolio_item project_tag-diff_client_name ” > Logo </div>
  <div class=“ portfolio_item project_tag-other_client_name ” > Logo </div>
</div>

<!— invisible separate div, holds tooltip contents —>
<div id="tooltips" style=“display:none”>
  <div class=“ portfolio_tooltip info_client_name ” > Project Info </div>
  <div class=“ portfolio_tooltip info_diff_client_name ” > Project Info </div>
  <div class=“ portfolio_tooltip info_other_client_name ” > Project Info </div>
</div>

我想：

1）动态查找包含“project_tag -...”的类的全类名。换句话说，“查找带有类的div”project_tag- 任何“。只需要一个类，特别是任何变体 - Wordpress添加”project_tag-“前缀。

2）在“#tooltips”中找到匹配“info_ 任何”的div。

3）在匹配的“project_tag-client_name”div中添加“info_client_name”div。

4）在不知道client_name的情况下动态执行所有操作，以便在创建新的项目组合项/工具提示时自动执行。最好用jQuery / JS。

这样做的原因是我可以在WP中为我的非comp-saavy客户端提供一个简单/清晰的编辑模块，为我提供更简单的CSS操作，并且只要类client_names匹配就使其几乎自动化。我已经有了一个工具提示，可以加载每个相应的info_content并在悬停/点击徽标时弹出，但是将它们放在单独的父项下会使CSS变得复杂。

另外，请随时告诉我任何更好的方法，也许我已经过度思考了。我挖掘学习。

Answer 1

对于你的问题，我正尽力得到答案。

回答1

$('[class^="project_tag-"]').css('color', 'red');

回答2

$('#tooltips [class^="info_"]').css('color', 'red');

回答3

$("[class='info_client_name']").appendTo($("[class='project_tag-client_name']"));

回答4

您可以用动态替换client_name。