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>

seems to work fine. I can get an event to trigger . jsfiddle.net/go0yjoae/1 — DinoMyte
– DinoMyte, Commented Nov 7, 2015 at 0:08
What do you want as result? When you click on span corresponding section must be selected right? — divy3993
– divy3993, Commented Nov 7, 2015 at 0:16
DinoMyte. I was using jquery 2.1.4 maybe that was the problem. I will try again with 2.1.3 like in the jsfiddle. Its strange that would make a difference. Thanks! — Flux Kraken
– Flux Kraken, Commented Nov 7, 2015 at 16:26

divy3993 · Accepted Answer · 2015-11-07 00:30:20Z

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

Collectives™ on Stack Overflow

Jquery - Each loop not working inside click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related