Add-Klasse zu einem bestimmten HTML-Struktur Muster mit Jquery

Question

Ich habe die folgende Struktur in HTML:

<ul> 
    <li> 
     <a href="#">1</a> 
    </li> 
    <li> 
     <a href="#">2</a> 
    </li> 
    <li> 
     <a href="">3</a> <!-- Add class to this a --> 
     <ul> 
      <li> 
       <a href="#">3.1</a> 
      </li> 
      <li> 
       <a href="#">3.2</a> 
      </li> 
      <li> 
       <a href="#">3.3</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">4</a> 
    </li> 
    <li> 
     <a href="">5</a> <!-- Add class to this a --> 
     <ul> 
      <li> 
       <a href="#">5.1</a>  <!-- Add class to this a --> 
       <ul> 
        <li> 
         <a href="#">5.1.1</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">5.2</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

Und ich möchte eine Klasse mit jQuery auf die ‚a‘ Elemente hinzuzufügen, wo es ein ‚a 'mit einem 'ul' Also, Fügen Sie eine Klasse für alle 'a' Elemente, die das folgende Muster haben:

li > a, ul 

-

<li> 
    <a href="#"></a>  <!-- Add class to this a --> 
    <ul> 
     .... 
    </ul> 
</li> 

Ich habe severals Wege versucht, aber ich kann sie nicht:

Zum Beispiel:

$('ul li a ul').each(function(){ 
    if ($(this).has('a, ul')) { 
     $(this).addClass('myClass'); 
    } 
    }); 

Answer 1

Sie können dies in einer einzigen Zeile durch all verschachtelten ul Elemente abrufen und mit prev() die vorherigen a zu erhalten :

$('li > ul').prev('a').addClass('foo'); 

Working example

Answer 2

Sieverwenden könnendie ul li a Elemente zu finden, die eine ul Geschwister:

$('ul li a').filter(function(){ 
 
    return $(this).siblings('ul').length>0; 
 
}).addClass("hasUL");

.hasUL{ 
 
    background-color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <a href="#">1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">2</a> 
 
    </li> 
 
    <li> 
 
     <a href="">3</a> <!-- Add class to this a --> 
 
     <ul> 
 
      <li> 
 
       <a href="#">3.1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">3.2</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">3.3</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">4</a> 
 
    </li> 
 
    <li> 
 
     <a href="">5</a> <!-- Add class to this a --> 
 
     <ul> 
 
      <li> 
 
       <a href="#">5.1</a>  <!-- Add class to this a --> 
 
       <ul> 
 
        <li> 
 
         <a href="#">5.1.1</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#">5.2</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 3

$('ul li').find('ul').siblings('a').addClass('addClass');

.addClass{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <a href="#">1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">2</a> 
 
    </li> 
 
    <li> 
 
     <a href="">3</a> <!-- Add class to this a --> 
 
     <ul> 
 
      <li> 
 
       <a href="#">3.1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">3.2</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">3.3</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">4</a> 
 
    </li> 
 
    <li> 
 
     <a href="">5</a> <!-- Add class to this a --> 
 
     <ul> 
 
      <li> 
 
       <a href="#">5.1</a>  <!-- Add class to this a --> 
 
       <ul> 
 
        <li> 
 
         <a href="#">5.1.1</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#">5.2</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

1. UL finden in der Liste aus und bekommen die Geschwister eine die Klasse hinzufügen

Answer 4

$(function() { 
 
    $('a').each(function(k, v) { 
 
    if ($(v).next().is('ul')) { 
 
     $(v).addClass('active'); 
 
    } 
 
    }); 
 
});

.active { 
 
    font-weight: bold; 
 
    color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#">1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">2</a> 
 
    </li> 
 
    <li> 
 
    <a href="">3</a> 
 
    <!-- Add class to this a --> 
 
    <ul> 
 
     <li> 
 
     <a href="#">3.1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">3.2</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">3.3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">4</a> 
 
    </li> 
 
    <li> 
 
    <a href="">5</a> 
 
    <!-- Add class to this a --> 
 
    <ul> 
 
     <li> 
 
     <a href="#">5.1</a> 
 
     <!-- Add class to this a --> 
 
     <ul> 
 
      <li> 
 
      <a href="#">5.1.1</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">5.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>