Nie rozumiem dlaczego w jednym przypadku jest wymagana pętla a w drugim nie

Hejka :)
Mam kod pokazujący/ukrywający zawartość tabów:

<ul class="tabs">
<li class="active"><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>

<div id="tab-1" class="tab">zawartosc 1</div>
<div id="tab-2" class="tab">zawartosc 2</div>
<div id="tab-3" class="tab">zawartosc 3</div>
<div id="tab-4" class="tab">zawartosc 4</div>

$('.tabs').each(function(){
	var $ul = $(this);
	var $li = $ul.children('li');
	$li.each(function(){
		var $zawartosc = $($(this).children('a').attr('href'));
		if($(this).hasClass('active')){
			$zawartosc.show();
		} else{
			$zawartosc.hide();
		}
	})
	$li.children('a').click(function(){
		$('li').removeClass('active');
		$li.each(function(){
			$($(this).children('a').attr('href')).hide();
		});
		$(this).parent().addClass('active');
		$($(this).attr('href')).show();

		return false;
});

})

Nie rozumiem dlaczego w 13 wierszu skryptu usunięcie klasy active dla wszystkich li nie potrzebuje pętli, natomiast ukrycie zawartości w wierszu 15 musi być w pętli each.
Mogę prosić o łopatologiczne wyjaśnienie? :)

pzdr

Zamiast odpowiedzi, refaktoryzacja kodu

https://jsfiddle.net/Lere7wy5/

@reptile333 dzięki, ten kod jest dużo bardziej czytelny, ale i w nim nie wszystko jest dla mnie jasne

nie rozumiem tych linijek:

var i = $("a:first", this);        
var id = i.attr("href").substring(1);

pod i podstawiamy link, ok ale dlaczego :first?
a w drugiej linijce nie wiem jakim cudem metoda substring() pobiera id skoro bierze drugi znak [1] z wartości href, wg mnie powinien w ten sposób pobrać znak "t" indeksując od zera...

:first ponieważ ważny w tym przypadku jest tylko pierwszy znaleziony element.
substring(1) zwróci cały string od 1 znaku z href'a linka, a href odnośnie się do np. #tab-2, więc zwróci tab-2, w zasadzie można by tego nie wycinać, bo potem i tak ten # jest doklejany.

@GThoro dzięki :)