Question

（我是一个初学者，所以请放纵自己，不要犹豫，要求精确。）

如果元素的两个父元素似乎在其各自的类名中共享某个字符串（在下面的“ stringx”下方），则我想向该元素添加一个类。但是“ stringx” 可以更改（“ string1”，“ string2”，“ string3”，“ string4”）。基本上，我需要说一句：“ stringx”是什么，在这两个父元素中应该相同。

目前，我有这段代码，重复了四次（从“ string1”到“ string4”）。

$(function() {
    $(".archive.tax-['string1'] article .prefixe_['string1'] .prefixe_numerique").each(function() {
    if //some conditional 
    {
        $(this).parents("article").addClass("dom");
    }
    else{
        $(this).parents("article").addClass("sub");
    }

    });
});

这是HTML的样子：

<body class="archive tax-string1"> <!--OR <body class="archive tax-string2">-->
 <article>
  <header>
   <div class="entry-meta">
    <p class="entry-title">
     <span class="prefixe_string1"> 
      <span class="prefixe_lettrique">C</span>
      <span class="prefixe_numerique">1.1</span>
     </span>
     <span class="prefixe_string2">
      <span class="prefixe_lettrique">︎</span>
      <span class="prefixe_numerique">2.</span>
     </span>
    </p> 
   </div>
  </header>
 </article>
</body>

Answer 1

您是否研究过jQuery中的高级选择器？在下面的示例中，我正在寻找具有特定字符串的类，然后将其应用于子类。

$('body[class*="tax-string"] span[class*="prefixe_string"]').children().addClass('className');

Answer 2

如果您已经知道'string1'...'string4'是什么，则可以使用此迭代：

['string1','string2','string3','string4'].forEach(function(str){
    $(".archive.tax-" + str + " article .prefixe_" + str + " .prefixe_numerique").each(
        function() { ... }
    );
});

但这很la脚。让我们使其通用：

$(".archive[class^="tax-"]").each(function(){ // select all relevant parent elements
    var tax = this.className.toString().match(/tax-(\S+)/);
    if (tax){
        tax = tax[1]; // get the "string1" thingie
        $(this).find('.prefixe_' + tax + ' .prefixe_numerique').each( // for every child element that match this specific "string1"
            function() { ... }
        );
    }
});

P.S：看起来您想要根据当前页面突出显示菜单中的当前部分。 IMO有更好的方法来完成它。例如，您可以使用“ data-”属性，这与css类不同，它们用于自定义字符串。这样，您就可以使用更易读的代码轻松获得所需的内容：

<body class="article" data-tax="string1">
 <article>
  <header>
   <div class="entry-meta">
    <p class="entry-title">
     <span class="prefixe_section" data-tax="string1"> 
      <span class="prefixe_lettrique">C</span>
      <span class="prefixe_numerique">1.1</span>
     </span>
     <span class="prefixe_section" data-tax="string2">
      <span class="prefixe_lettrique">︎</span>
      <span class="prefixe_numerique">2.</span>
     </span>
    </p> 
   </div>
  </header>
 </article>
</body>

还有JS部分：

var current_tax = $('body').data('tax');
if (current_tax)
    $('.prefixe_section[data-tax="'+current_tax+'"] .prefixe_numerique').addClass('highlight');

如果两个父母在各自的班级中共享字符串char，则向元素添加班级

2 个答案: