bekommen eine bestimmte Klasse von einem Element mit Wildcard

Question

Ich wünsche die Klasse beginnend mit Logo, nur Beispiel Artikel zu erhalten ist:

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>

Es funktioniert, indem ID und passende zu finden, die aber ich kann es nicht dazu bringen, die Klasse auszuwählen, die ich möchte.

Auch möchte ich dann diese Klasse nehmen und auf das Elternelement der ursprünglichen href setzen.

Answer 1

Sie für die aktuelle Position Klasse überprüfen können die jQuery verwendet, ist Methode wie folgt:

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

finden ein einfaches Arbeitsbeispiel hier: https://codepen.io/jpgcode/pen/GEdQRp

Answer 2

Wenn Sie wollen, was ich glaube, dass Sie wollen (das ist eine Klasse, die mit logo- beginnt, dann können Sie Regular expressions, auch bekannt als Regex.

Ich würde /^logo-[^ ]*/g als Regex verwenden.

Die Symbole / und /g symbolisieren einen neuen regulären Ausdruck. Die ^ symbolisiert den Anfang des Wortes. Die logo- symbolisiert, dass der Anfang des Wortes die Zeichenfolge logo- enthält. Die [^ ] symbolisiert, dass es ein Zeichen haben wird, das kein Leerzeichen nach ihm ist, und * symbolisiert, dass es ein oder mehrere Zeichen geben wird, die kein Leerzeichen sind.

Answer 3

Das Problem ist die Suchklasse ist in Klassen Liste. Eine Möglichkeit besteht darin, alle Klassen zu lesen und dann die erforderliche Klassenart zu extrahieren. Hier ist der Beispiel-Arbeitscode. Ich habe keinen Code hinzugefügt, um in den Suchergebnissen für die Klassenliste nach Eindeutigkeit zu suchen.

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>

Der andere Weg ist, die erforderliche Klasse mit regulärem Ausdruck aus der Klassenliste Zeichenfolge zu greifen.

Ich hoffe, das hilft dir !!