CODEWITHSUNDEEP
javascriptjquery
VikVikVik
VikVikVik

Reputation: 23

Add style to every element child using loops

So I've got a little tab setup in my html. Like so:

<ul id="tabs">
    <li><a href="#tab_div_1">Tab link 1</a></li>
    <li><a href="#tab_div_2">Tab link 2</a></li>
    <li><a href="#tab_div_3">Tab link 3</a></li>
    <li><a href="#tab_div_4">Tab link 4</a></li>
</ul>
<div id="tab_content">
    <div id="tab_div_1">Tab content 1</div>
    <div id="tab_div_2">Tab content 2</div>
    <div id="tab_div_3">Tab content 3</div>
    <div id="tab_div_4">Tab content 4</div>
</div>

So obviously every "Tab link" opens a specific "Tab content div".

Now,... ... I want to get position(top) of every ul#tabs a and make it padding-top to a belonging #tab_div.

I can do it by doing this:

var tabLink = $( "a[href='#tab_div_1']" );
var position = tabLink.position();  
var tabTarget = $("#tab_div_1");

tabTarget.css("padding-top",position.top );

by repeating it for every tab.

But I would like to do it with a loop either using vanila javascript or jquery.

Upvotes: 0

Views: 62

Answers (2)

Eyal Ofri
Eyal Ofri

Reputation: 700

You can add to every tab a class and then use the vanilla JS getElementsByClassName(). You'll get an array-like of the required elements which you'll be able to loop throgh.

Upvotes: 0

Crisoforo Gaspar
Crisoforo Gaspar

Reputation: 3830

You can use:

$('#tabs').find('a').each(function(i, el){
    var $el = $(el);
    var position = $el.position();
    var target = $el.attr('href');
    $(target).css('padding-top', position.top);
});

Upvotes: 1

Related Questions