Jquery - Each loop not working inside click event

Question

I am having trouble with this problem. I have searched the internet for about 2 hours before asking this, and I have searched here on stack overflow.

I have a .click event on navigation spans I am linking these to content divs by setting the same title on both the spans and divs.

now the two each loops that I run to set the titles work perfectly and the click event on the spans work perfectly. However the each loop that I have nested in the click event doesn't run and I am baffled as to why.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        var i = 0;
        var l = 0;
        var thisTitle;
        $(function() {
           $(".sectionSelector > nav > span").each(function() {
              i += 1;
              $(this).attr("title", i);
           });
           $(".sectionSelector > section").each(function() {
              l += 1;
              $(this).attr("title", l); 
           });
           $(".sectionSelector > nav > span").click(function() {
               thisTitle = $(this).attr("title");
               $(".sectionSelector > section").each(function() {
                   //any code put here doesnt work.  i dont know why.
                });
           });
        });
    </script>
    <style type="text/css">
        div.sectionSelector {

        }
        div.sectionSelector nav {
            width: 100%;
            height: 25px;
            padding-top: 5px;
            background-color: #002;
            color: white;
        }
        div.sectionSelector nav span {
            padding-left: 10px;
            padding-right: 10px;
            border-left: 2px solid white;
            border-right: 2px solid white;
        }
        div.sectionSelector nav span:first-child {
            border-left: 4px solid white;
            margin-left: 10px;
        }
        div.sectionSelector nav span:last-child {
            border-right: 4px solid white;
        }
        div.sectionSelector section {

        }
        div.sectionSelector section:first-child {

        }
        div.sectionSelector section:last-child {

        }
    </style>    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="phMainContent" Runat="Server">
    <div class="sectionSelector">
        <nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav>
        <section>
            <h1>Section 1</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 2</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 3</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
    </div>
</asp:Content>

Answer 1

If you are looking for selecting corresponding section as per the span by title attribute, than try this:

 $(".sectionSelector > section[title = \""+thisTitle+"\"]")

Working : Demo

Snippet:

 var i = 0;
        var l = 0;
        var thisTitle;
        $(function() {
           $(".sectionSelector > nav > span").each(function() {
              i += 1;
              $(this).attr("title", i);
           });
           $(".sectionSelector > section").each(function() {
              l += 1;
              $(this).attr("title", l); 
           });
           $(".sectionSelector > nav > span").click(function() {
               thisTitle = $(this).attr("title");
               $(".sectionSelector > section").css("background","#fff");
               $(".sectionSelector > section[title = \""+thisTitle+"\"]").css("background","lightblue");
           });
        });

 div.sectionSelector {

        }
        div.sectionSelector nav {
            width: 100%;
            height: 25px;
            padding-top: 5px;
            background-color: #002;
            color: white;
        }
        div.sectionSelector nav span {
            padding-left: 10px;
            padding-right: 10px;
            border-left: 2px solid white;
            border-right: 2px solid white;
        }
        div.sectionSelector nav span:first-child {
            border-left: 4px solid white;
            margin-left: 10px;
        }
        div.sectionSelector nav span:last-child {
            border-right: 4px solid white;
        }
        div.sectionSelector section {

        }
        div.sectionSelector section:first-child {

        }
        div.sectionSelector section:last-child {

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sectionSelector">
        <nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav>
        <section>
            <h1>Section 1</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 2</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 3</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
    </div>

Note: The effect here of changing background color after selecting section is just random, you can do whatever you prefer after selecting corresponding section that of span based on title