jquery - 动态读取类名并配对/追加匹配的 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-...”的类的整个类名。换句话说，“查找类为“project_tag-anything”的 div。只需要一个类，特别是 anything 变体 - Wordpress 添加了“project_tag-”前缀。

2) 在“#tooltips”内查找具有匹配“info_anything”的 div。

3) 将“info_client_name”div append 到匹配的“project_tag-client_name”div 内。

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

这样做的原因是，我可以在 WP 中为我的非 comp-saavy 客户端提供一个简单/清晰的编辑模块，允许我更轻松地进行 CSS 操作，并且只要类 client_names 匹配，它就几乎是自动的。我已经有一个工具提示，可以加载每个相应的 info_content 并在悬停/点击 Logo 时弹出，但是将它们放在单独的父项下会使 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 替换为动态名称。