locked
Jquery get next() id RRS feed

  • Question

  • User1519602350 posted

    Below my code, each time i press "next" its prints out the same value i.e, "step1",... I would like to print all the steps , step2, step3, step4

    HTML Code

    <div class="tab-content">
    <div class="tab-pane fade in" id="step{{@index}}">
    <div class='gg' id='step0'>0</div>
    <div class='gg' id='step1'>1</div>
    <div class='gg' id='step2'>2</div>
    <div class='gg' id='step3'>3</div>
    <div class='gg' id='step4'>4</div>

    </div>

    Jquery code

    $('.tab-content').find('.tab-pane').next().find('.gg').attr('id')

    Thanks

    Thursday, July 21, 2016 11:40 AM

Answers

  • User283571144 posted

    Hi  ssvikramuk,

    Below my code, each time i press "next" its prints out the same value i.e, "step1",... I would like to print all the steps , step2, step3, step4

    According to your question, I suggest, you could refer to follow steps:

    1. Add a class named "selected" in "<div id=‘step’>".

    2. use jQuery alert function show the "div“ which contains class named "selected".

    3.Remove this "div"'s class.

    4.Use jQuery next function put next "div" class named "selected".

    Besides, we should check which is the last "div" and set the first "div" selected.

    More details, you could refer to follow codes:

    <script src="jquery-1.7.1.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    var selectItem = $(".selected");
                    alert(selectItem.attr("id"))
    
                    if (selectItem.next().length == 0) {
                        $("#step0").attr("class", "selected");
                    } else {
                        selectItem.next().attr("class", "selected");
                        selectItem.removeAttr("class");
                    }
                }
                )
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
      
        <div class="tab-content" id="213">
    <div class="tab-pane" id="222">
    <div class='selected' id='step0'>0</div>
    <div id='step1'>1</div>
    <div id='step2'>2</div>
    <div id='step3'>3</div>
    <div id='step4'>4</div>
        </div>
    
        </div>
            <input type="button" id="Button1" value="next" />
        </form>
    </body>

    Best Regards,

    Brando

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2016 1:42 PM
  • User-474980206 posted

    the jquery .next() is not an iterator, it just returns the current node's sibling. to loop thru the nodes, use $.each

    $('.tab-content .tab-pane .gg').each(function() {
        console.log(this.id);
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2016 2:59 PM

All replies

  • User283571144 posted

    Hi  ssvikramuk,

    Below my code, each time i press "next" its prints out the same value i.e, "step1",... I would like to print all the steps , step2, step3, step4

    According to your question, I suggest, you could refer to follow steps:

    1. Add a class named "selected" in "<div id=‘step’>".

    2. use jQuery alert function show the "div“ which contains class named "selected".

    3.Remove this "div"'s class.

    4.Use jQuery next function put next "div" class named "selected".

    Besides, we should check which is the last "div" and set the first "div" selected.

    More details, you could refer to follow codes:

    <script src="jquery-1.7.1.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    var selectItem = $(".selected");
                    alert(selectItem.attr("id"))
    
                    if (selectItem.next().length == 0) {
                        $("#step0").attr("class", "selected");
                    } else {
                        selectItem.next().attr("class", "selected");
                        selectItem.removeAttr("class");
                    }
                }
                )
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
      
        <div class="tab-content" id="213">
    <div class="tab-pane" id="222">
    <div class='selected' id='step0'>0</div>
    <div id='step1'>1</div>
    <div id='step2'>2</div>
    <div id='step3'>3</div>
    <div id='step4'>4</div>
        </div>
    
        </div>
            <input type="button" id="Button1" value="next" />
        </form>
    </body>

    Best Regards,

    Brando

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2016 1:42 PM
  • User-474980206 posted

    the jquery .next() is not an iterator, it just returns the current node's sibling. to loop thru the nodes, use $.each

    $('.tab-content .tab-pane .gg').each(function() {
        console.log(this.id);
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2016 2:59 PM