使用通配符

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>

另一種方式是抓住使用從類列表中字符串的正則表達式所需的類。

我希望這可以幫助你！