How to use ClassName add entries to a DIV

Question

HTML source:

<span class="specLink">
    <specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty>
</span>
<br />
<span class="specLink">
    <specialty2><a title="Hand Surgery" href="link3.aspx">Hand Surgery</a></specialty2>
</span>

How can I create a JQuery script which runs during page load to displays the same list taking from the HTML Source listed above?

E.g.:

<div class="justPad">
    <a title="Plastic Surgery" href="link2.aspx" class="defaultLinks">Plastic Surgery</a>
</div>
<div class="justPad">
    <a title="Hand Surgery" href="link3.aspx" class="defaultLinks">Hand Surgery</a>
</div>

How I would like it to be:

var k = "";
$(".specLink").each(function() {
    var aLink = $(".specLink").replace(<%-- Remove the <specialty#></specialty#> tags and only keep the anchor link --%>);

    k += '<div class="justPad">'; //.. as many entries that shows up
    k += aLink; //.. as many entries that shows up
    k += '</div>'; //.. as many entries that shows up
});

//Once I have added 
$(".addSpecialties").html(k);

Blank HTML:

<div class="serviceHolder brClear addSpecialties">
    //add inside here from the JQuery above
</div>

Sounds like you need AngularJS. Here is a free course campus.codeschool.com/courses/shaping-up-with-angular-js/intro — Jorge Zuverza
– Jorge Zuverza, Commented Dec 3, 2014 at 17:28
@JorgeZuverza "Sounds like you need AngularJS" - I beg your pardon?! — Tomalak
– Tomalak, Commented Dec 3, 2014 at 17:33
AngularJS and jQuery solve very different problems. The real question is "Why would that problem indicate that I need AngularJS?", and I'm sure JorgeZuverza would have a pretty hard time explaining that. — Tomalak
– Tomalak, Commented Dec 3, 2014 at 17:39

Tomalak · Accepted Answer · 2014-12-03 17:31:11Z

2

Something like:

var specialties = $(".specLink a").map(function() {
    return $('<div class="justPad">').append( $(this).clone() )[0];
}).toArray();

$(".addSpecialties").empty().append(specialties);

answered Dec 3, 2014 at 17:31

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SearchForKnowledge Over a year ago

Do I have to add the closing </div>?

Andrew Dunai Over a year ago

@SearchForKnowledge nope, <div... here is not an opening tag but is just a string that orders jQuery to create new div with class 'justPad'.

Tomalak Over a year ago

@SearchForKnowledge No, but you can, if it helps you relax. ;-) jQuery does the right thing without it.

SearchForKnowledge Over a year ago

Yes it sure will help me relate... :D... Do I just add that before the [0]?

Tomalak Over a year ago

No. You would use $('<div class="justPad"></div>'). I think you need to take a break and learn jQuery basics. You're moving to fast.

|

Collectives™ on Stack Overflow

How to use ClassName add entries to a DIV

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related