javascript / jquery-如何从父类的重复出现中获取子类名称的变量

Question

EDIT (old link to JSFiddle was wrong): Link to JSFiddle example: https://jsfiddle.net/uvexys0a/

I am attempting to program in jQuery so it wraps an HTML link to the staff member's profile page wraps around the entire each div with the class name staffList . The path to the page is stored as a child class in each div, as seen on the JSFiddle.

The code seems to function, somewhat. Both links end up going to John Smith's profile:

<a href="https://example.com/john-smith">
    <div class="staffList john-smith">
        <p>John Smith</p>
        <p>Co-Founder</p>
    </div>
</a>

<a href="https://example.com/john-smith">
    <div class="staffList jane-smith">
        <p>Jane Smith</p>
        <p>Co-Founder</p>
    </div>
</a>

However, if the code was running properly, it would output like this:

<a href="https://example.com/john-smith">
    <div class="staffList john-smith">
        <p>John Smith</p>
        <p>Co-Founder</p>
    </div>
</a>

<a href="https://example.com/jane-smith">
    <div class="staffList jane-smith">
        <p>Jane Smith</p>
        <p>Co-Founder</p>
    </div>
</a>

How do you code so the variable staffURL changes with each repeated parent div with parent class staffList and the child class the corresponding staff member's link?

Answer 1

You're basing your links off of the second class name, but in your second staffList, you say John Smith again, so you get john-smith both times for each link. You can change that to jane-smith and loop over each item to get what you want. Try this:

 jQuery(function($){ var staffList = $(".staffList"); $.each(staffList, function(i) { var staffURL = $(this).attr('class').split(' ')[1]; $(staffList[i]).wrap("<a href='https://example.com/"+staffURL+"/'></a>"); }); }); 

 .staffList { border: 1px solid #000; margin: 15px; text-align: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="warpper"> <div id="staffSection"> <div class="staffList john-smith"> <p>John Smith</p> <p>Co-Founder</p> </div> <div class="staffList jane-smith"> <p>Jane Smith</p> <p>Co-Founder</p> </div> </div> </div> </div> 

jsfiddle: https://jsfiddle.net/7nxbu1t5/2/

Answer 2

You'd need to loop through each staffList item in order to set the URL dynamically.

 jQuery(function($) { /** * Loop through each list item */ $('.staffList').each(function() { var $listItem = $(this); var staffSlug = $listItem .attr('class') // Get the value of the class attribute .replace('staffList', '') // Remove the common class .trim(); // Clear up any pre/appending white space // Wrap element in `a` tag $listItem.wrap('<a href="https://example.com/' + staffSlug + '"></a>'); }); }); 

 .staffList { border: 1px solid #000; margin: 15px; text-align: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="warpper"> <div id="staffSection"> <div class="staffList john-smith"> <p>John Smith</p> <p>Co-Founder</p> </div> <div class="staffList jane-smith"> <p>Jane Smith</p> <p>Co-Founder</p> </div> </div> </div> </div>