Search jQuery

jQuery Forum

find anchor and addclass to specific link

in Using jQuery • 10 years ago

hi guys.. i have a litte question...

is there a way the search for a name "1-LINK" and find in the next ul > li > a "#1-LINK" and addClass "active"
(but only in the first ul after finding "1-LINK")

and this for all 4 boxes:

a name "1-LINK" and find in the next ul > li > a "#1-LINK" and addClass "active"
a name "2-LINK" and find in the next ul > li > a "#2-LINK" and addClass "active"
a name "3-LINK" and find in the next ul > li > a "#3-LINK" and addClass "active"
a name "4-LINK" and find in the next ul > li > a "#4-LINK" and addClass "active"

the <ul class="box-head-nav"> .. </ul> part is an dynamic included php so i cant set the class with "active" manually.

this is my original code:

<div class="box">
    <div class="box-head">
        <a name="1-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 1</h2>
    </div>
    <div class="box-content">CONTENT BOX 1</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="2-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 2</h2>
    </div>
    <div class="box-content">CONTENT BOX 2</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="3-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 3</h2>
    </div>
    <div class="box-content">CONTENT BOX 3</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="4-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 4</h2>
    </div>
    <div class="box-content">CONTENT BOX 4</div>
</div>

and it should look like this:

<div class="box">
    <div class="box-head">
        <a name="1-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button ACTIVE" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 1</h2>
    </div>
    <div class="box-content">CONTENT BOX 1</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="2-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button ACTIVE" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 2</h2>
    </div>
    <div class="box-content">CONTENT BOX 2</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="3-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button ACTIVE" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 3</h2>
    </div>
    <div class="box-content">CONTENT BOX 3</div>
</div>

<div class="box">
    <div class="box-head">
        <a name="4-LINK"> </a>
        <ul class="box-head-nav">
            <li><a class="head-nav-button" href="#1-LINK">1. LINK</a></li>
            <li><a class="head-nav-button" href="#2-LINK">2. LINK</a></li>
            <li><a class="head-nav-button" href="#3-LINK">3. LINK</a></li>
            <li><a class="head-nav-button ACTIVE" href="#4-LINK">4. LINK</a></li>
            <li><a class="head-nav-button-back" href="index.php">Start</a></li>
        </ul>
        <h2>HEADLINE BOX 4</h2>
    </div>
    <div class="box-content">CONTENT BOX 4</div>
</div>