使用通配符

Question

我想要得到的类开始的标志从一个元素获取一定的阶级，只有例如产品：

jQuery(document).ready(function($) { 
 

 
    // add classes to tab items 
 
    var listItems = $(".vc_tta-tab a"); 
 
    // loop through all tab items 
 
    listItems.each(function(idx, item) { 
 
    var listItem = $(item); 
 
    var tabID = listItem.attr("href"); 
 
    console.log(tabID); 
 
    var matchCard = $(tabID).find('[class^="logo-"]'); 
 
    var tabClass = $(tabID).attr("class"); 
 
    console.log(tabClass); 
 
    console.log(matchCard); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left"> 
 
    <div class="vc_tta-tabs-container"> 
 
    <ul class="vc_tta-tabs-list"> 
 
     <li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#ssl-brand-symantec" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-geotrust" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-rapidssl" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-thawte" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-certum" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-comodo" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="vc_tta-panels-container"> 
 
    <div class="vc_tta-panels"> 
 
     <div class="vc_tta-panel vc_active logo-ssl-symantec" id="ssl-brand-symantec" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-symantec" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-geotrust" id="ssl-brand-geotrust" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-geotrust" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-rapidssl" id="ssl-brand-rapidssl" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-rapidssl" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-thawte" id="ssl-brand-thawte" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-thawte" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-certum" id="ssl-brand-certum" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-certum" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-comodo" id="ssl-brand-comodo" data-vc-content=".vc_tta-panel-body"> 
 
     <div class="vc_tta-panel-heading"> 
 
      <h4 class="vc_tta-panel-title"><a href="#ssl-brand-comodo" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></h4> 
 
     </div> 
 
     <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

它是通过查找ID和匹配工作是但不能让它选择我想要的课程。

此外，我想要采取该类，并设置为初始href的父元素。

Answer 1

您可以检查使用jQuery 当前项目类方法如下：

if($(item).is('[class^="logo-"]'))

在这里找到一个简单的工作示例：https://codepen.io/jpgcode/pen/GEdQRp

Answer 2

如果你想要什么，我相信你是想要的（这是选择一个以logo-开头的类，那么你可以使用Regular expressions，也称为正则表达式。）

我会用/^logo-[^ ]*/g作为正则表达式。

/和/g象征一个新的正则表达式。 ^象征着这个词的开始。 logo-表示该单词的开头包含字符串logo-。 [^ ]象征着它将具有不是后面的空格的字符，并且*象征着将有一个或多个字符不是空格。

Answer 3

问题是搜索类是在类列表中。一种方法是读取所有类并提取所需类型的类。 这是示例工作代码。我没有添加代码来检查班级列表的搜索结果中的唯一性。

jQuery(document).ready(function($) { 
 
    var allLogoClasses = []; 
 
    // add classes to tab items 
 
    var listItems = $(".vc_tta-tab a"); 
 
    // loop through all tab items 
 
    listItems.each(function(idx, item) { 
 
    var listItem = $(item); 
 
    var tabID = listItem.attr("href"); 
 
\t var classes = $(tabID).attr('class'); 
 
\t if(classes) { 
 
\t \t classes = classes.split(" "); 
 
\t \t for(var index = 0; index < classes.length; index++) { 
 
\t \t \t if(classes[index].startsWith("logo-")) { 
 
\t \t \t \t allLogoClasses.push(classes[index]); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t }); 
 
\t console.log(allLogoClasses); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left"> 
 
    <div class="vc_tta-tabs-container"> 
 
     <ul class="vc_tta-tabs-list"> 
 
     <li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#ssl-brand-symantec" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-geotrust" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-rapidssl" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-thawte" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-certum" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></li> 
 
     <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-comodo" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="vc_tta-panels-container"> 
 
     <div class="vc_tta-panels"> 
 
     <div class="vc_tta-panel vc_active logo-ssl-symantec" id="ssl-brand-symantec" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-symantec" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-geotrust" id="ssl-brand-geotrust" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-geotrust" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-rapidssl" id="ssl-brand-rapidssl" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-rapidssl" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-thawte" id="ssl-brand-thawte" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-thawte" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-certum" id="ssl-brand-certum" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-certum" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     <div class="vc_tta-panel logo-ssl-comodo" id="ssl-brand-comodo" data-vc-content=".vc_tta-panel-body"> 
 
      <div class="vc_tta-panel-heading"> 
 
       <h4 class="vc_tta-panel-title"><a href="#ssl-brand-comodo" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></h4> 
 
      </div> 
 
      <div class="vc_tta-panel-body"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

另一种方式是抓住使用从类列表中字符串的正则表达式所需的类。

我希望这可以帮助你！