Al buscar la siguiente identificación del elemento en Jquery, la solución más simple es usar la más cercana (elemento). pero no funciona para Canvas y no sé por qué.
$('a.findNext').click(function() { debugger; var nextSectionWithId = $(this).closest("canvas").nextAll("canvas[id]:first"); if (nextSectionWithId) { var sectionId = nextSectionWithId.attr('id'); $("#test").text(sectionId) } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="section_1"> <a href="#" class="findNext">Find</a> </div> <div></div> <canvas id="section_3"></canvas> <canvas id="section_4"></canvas> <div id='test'></div>Demostración: http://jsfiddle.net/jtdgo304/6/
.closest seleccionará el antepasado más cercano que coincida con el selector. Pero el elemento .findNext no tiene un ancestro de canvas .
Si desea obtener el siguiente ancestro, primero deberá navegar a un elemento que sea hermano del lienzo (que es la #section_1 aquí), luego use .nextAll .
También debe verificar la .length de la colección jQuery para ver si coincide con algún elemento.
$('a.findNext').click(function() { const nextSectionWithId = $(this).parent().nextAll("canvas[id]:first"); if (nextSectionWithId.length) { const sectionId = nextSectionWithId.attr('id'); $("#test").text(sectionId) } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="section_1"> <a href="#" class="findNext">Find</a> </div> <div></div> <canvas id="section_3"></canvas> <canvas id="section_4"></canvas> <div id='test'></div>