Recursively find the next section by class name

I have a block of HTML which put simply contains a series of 'sections' each section contains an button. What I'm trying to do is get the section that the button was clicked from and then get the next section and I just cannot get anywhere near it (!) so the HTML (trimmed down for ease of reading as the div containing the button has loads of markup within it) is the following:

<section class="showMe">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>

So when the 'button' is clicked the following script block is fired:

$('section .reg-next-button').on(click, function (e) {

    var section = $(this).closest("section"); //This gives me the section that the button was clicked from



    //what I've tried to get the 'next' section all of which have been unsuccessful



    var $next = section.next('.showMe');

    var $next = $(this).next('section');

    var $next = $(this).closest('section').find('showMe');

    var $next = $('section.showMe').nextAll();

    var $next = section.next().find('.showMe');



    //once I've got the 'next section I'll do some stuff with adding/removing classes to make the section shown/hidden



});

Could anyone assist please?

Thanks,
C

asked Nov 13 '18 at 11:16

SxChoc

3092619

3

Problem is in event name that you used click as variable but you should use as string

– Mohammad
Nov 13 '18 at 11:20

@Mohammad given that the OP states their event handler runs, I would assume that's just a typo in the question

– Rory McCrossan
Nov 13 '18 at 11:22

@RoryMcCrossan So section.next('.showMe') should work that OP used

– Mohammad
Nov 13 '18 at 11:25

You're right, my bad. This would be a typo in that case, voting to close.

– Rory McCrossan
Nov 13 '18 at 11:27

Hi, but it doesn't work

– SxChoc
Nov 13 '18 at 11:28

|
show 6 more comments

<section class="showMe">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>

So when the 'button' is clicked the following script block is fired:

$('section .reg-next-button').on(click, function (e) {

    var section = $(this).closest("section"); //This gives me the section that the button was clicked from



    //what I've tried to get the 'next' section all of which have been unsuccessful



    var $next = section.next('.showMe');

    var $next = $(this).next('section');

    var $next = $(this).closest('section').find('showMe');

    var $next = $('section.showMe').nextAll();

    var $next = section.next().find('.showMe');



    //once I've got the 'next section I'll do some stuff with adding/removing classes to make the section shown/hidden



});

Could anyone assist please?

Thanks,
C

asked Nov 13 '18 at 11:16

SxChoc

3092619

3

Problem is in event name that you used click as variable but you should use as string

– Mohammad
Nov 13 '18 at 11:20

@Mohammad given that the OP states their event handler runs, I would assume that's just a typo in the question

– Rory McCrossan
Nov 13 '18 at 11:22

@RoryMcCrossan So section.next('.showMe') should work that OP used

– Mohammad
Nov 13 '18 at 11:25

You're right, my bad. This would be a typo in that case, voting to close.

– Rory McCrossan
Nov 13 '18 at 11:27

Hi, but it doesn't work

– SxChoc
Nov 13 '18 at 11:28

|
show 6 more comments

<section class="showMe">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>

So when the 'button' is clicked the following script block is fired:

$('section .reg-next-button').on(click, function (e) {

    var section = $(this).closest("section"); //This gives me the section that the button was clicked from



    //what I've tried to get the 'next' section all of which have been unsuccessful



    var $next = section.next('.showMe');

    var $next = $(this).next('section');

    var $next = $(this).closest('section').find('showMe');

    var $next = $('section.showMe').nextAll();

    var $next = section.next().find('.showMe');



    //once I've got the 'next section I'll do some stuff with adding/removing classes to make the section shown/hidden



});

Could anyone assist please?

Thanks,
C

asked Nov 13 '18 at 11:16

SxChoc

3092619

<section class="showMe">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>



<section class="showMe d-none">

    <div class="col-md-12 form-group">

         <a class="reg-next-button">Next</a>

    </div>

</section>

So when the 'button' is clicked the following script block is fired:

$('section .reg-next-button').on(click, function (e) {

    var section = $(this).closest("section"); //This gives me the section that the button was clicked from



    //what I've tried to get the 'next' section all of which have been unsuccessful



    var $next = section.next('.showMe');

    var $next = $(this).next('section');

    var $next = $(this).closest('section').find('showMe');

    var $next = $('section.showMe').nextAll();

    var $next = section.next().find('.showMe');



    //once I've got the 'next section I'll do some stuff with adding/removing classes to make the section shown/hidden



});

Could anyone assist please?

Thanks,
C

jquery html

asked Nov 13 '18 at 11:16

SxChoc

3092619

asked Nov 13 '18 at 11:16

SxChoc

3092619

asked Nov 13 '18 at 11:16

SxChoc

3092619

asked Nov 13 '18 at 11:16

SxChoc

3092619

asked Nov 13 '18 at 11:16

SxChoc

3092619

3

Problem is in event name that you used click as variable but you should use as string

– Mohammad
Nov 13 '18 at 11:20

@Mohammad given that the OP states their event handler runs, I would assume that's just a typo in the question

– Rory McCrossan
Nov 13 '18 at 11:22

@RoryMcCrossan So section.next('.showMe') should work that OP used

– Mohammad
Nov 13 '18 at 11:25

You're right, my bad. This would be a typo in that case, voting to close.

– Rory McCrossan
Nov 13 '18 at 11:27

Hi, but it doesn't work

– SxChoc
Nov 13 '18 at 11:28

|
show 6 more comments

3

Problem is in event name that you used click as variable but you should use as string

– Mohammad
Nov 13 '18 at 11:20

@Mohammad given that the OP states their event handler runs, I would assume that's just a typo in the question

– Rory McCrossan
Nov 13 '18 at 11:22

@RoryMcCrossan So section.next('.showMe') should work that OP used

– Mohammad
Nov 13 '18 at 11:25

You're right, my bad. This would be a typo in that case, voting to close.

– Rory McCrossan
Nov 13 '18 at 11:27

Hi, but it doesn't work

– SxChoc
Nov 13 '18 at 11:28

Problem is in event name that you used click as variable but you should use as string

– Mohammad
Nov 13 '18 at 11:20

@Mohammad given that the OP states their event handler runs, I would assume that's just a typo in the question

– Rory McCrossan
Nov 13 '18 at 11:22

@RoryMcCrossan So section.next('.showMe') should work that OP used

– Mohammad
Nov 13 '18 at 11:25

You're right, my bad. This would be a typo in that case, voting to close.

– Rory McCrossan
Nov 13 '18 at 11:27

Hi, but it doesn't work

– SxChoc
Nov 13 '18 at 11:28

|
show 6 more comments

1 Answer
1

active

oldest

votes

once you got current section you will be able to get next section without any input parameters. Here you can find sample fiddle.

$('section .reg-next-button').on('click', function (e) {

var section = $(this).closest("section");

var $next = section.next();    

alert($next.attr('class'));

});

answered Nov 13 '18 at 15:11

dganenco

2227

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279830%2frecursively-find-the-next-section-by-class-name%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

once you got current section you will be able to get next section without any input parameters. Here you can find sample fiddle.

$('section .reg-next-button').on('click', function (e) {

var section = $(this).closest("section");

var $next = section.next();    

alert($next.attr('class'));

});

answered Nov 13 '18 at 15:11

dganenco

2227

add a comment |

once you got current section you will be able to get next section without any input parameters. Here you can find sample fiddle.

$('section .reg-next-button').on('click', function (e) {

var section = $(this).closest("section");

var $next = section.next();    

alert($next.attr('class'));

});

answered Nov 13 '18 at 15:11

dganenco

2227

add a comment |

once you got current section you will be able to get next section without any input parameters. Here you can find sample fiddle.

$('section .reg-next-button').on('click', function (e) {

var section = $(this).closest("section");

var $next = section.next();    

alert($next.attr('class'));

});

answered Nov 13 '18 at 15:11

dganenco

2227

once you got current section you will be able to get next section without any input parameters. Here you can find sample fiddle.

$('section .reg-next-button').on('click', function (e) {

var section = $(this).closest("section");

var $next = section.next();    

alert($next.attr('class'));

});

answered Nov 13 '18 at 15:11

dganenco

2227

answered Nov 13 '18 at 15:11

dganenco

2227

answered Nov 13 '18 at 15:11

dganenco

2227

answered Nov 13 '18 at 15:11

dganenco

2227

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky