jquery - Append element only when "content/text" is found -


is possible, jquery, following:

given document marked h1 through h6, append "back top" link after every heading element if there text written after heading , before next..

so:

<h1>h1</h1> <p>text</p> <h2>h2</h2> <h3>h3</h3> text text <h4>h4</h4> <br><br> <h5>h5</h5> <br><br>text <h6>h6</h6> <div>test</div>

would result in 

<h1>h1</h1> <p>text</p> <a..>back top</a> <h2>h2</h2> <h3>h3</h3> text text <a..>back top</a> <h4>h4</h4> <br><br> <h5>h5</h5> <br><br>text <a..>back top</a> <h6>h6</h6> <div>test</div> <a..>back top</a>

so text can in paragraphs, divs, spans, or not marked @ all...

i'm not sure how this, , how select last element before next (or if it's last ?) append link to.

any (doesn't have complete solution) welcome.

edit: biggest issue this:

unfortunately i'm working cms doesn't output paragraphs, instead outputs 

 <h1>..</h1><br>text<br><br><h2>h2</h2>

and on..

so also: 

<h1>test</h1> <br> <h2>test</h2>

using second solution presented here, adds top link when shouldn't.. i'm not sure how prevent that.

edit 2:

tried changing to: 

$('#content').find('h1, h2, h3, h4, h5, h6').each( function(i, item) {     var nextitems = $(item).nextuntil('h1, h2, h3, h4, h5, h6');      if (nextitems.filter('p, div, span').size() > 0 || nextitems.filter(function() {         return this.nodetype == node.text_node;     }).size() > 0) {         nextitems.last().after('<p><a href="#toc-top" class="toc-top">back top</a></p>');     } });

but it's never finding text nodes.. reason why? contents h2 followed br , text...

this easy enough, provided enclose text after heading tags container:

$(document).ready(function() {      $('h1, h2, h3, h4, h5, h6').each( function(i, item) {         if ( $(item).nextuntil('h1, h2, h3, h4, h5, h6').text() ) {             $(item)                 .nextuntil('h1, h2, h3, h4, h5, h6').last()                 .after('<a href="#top">back top</a>');         }     });  });

this works regardless of how many nodes have after headings, provided text wrapped in tag of sort.

update if can't wrap text nodes tag, suggestion use jquery first - allow process code consistently, , work around limitation of nextuntil. update code above following:

$(document).ready(function() {      // wrap text nodes span     $('#container') // note i'm using container reference scope - adjust needed        .contents()       .filter(function() {         return this.nodetype == 3; //node.text_node       }).wrap('<span class="temp" />');      $('h1, h2, h3, h4, h5, h6').each( function(i, item) {         var items = $(item).nextuntil('h1, h2, h3, h4, h5, h6');         if ( items.text().match(/[^\s]/gi) ) {             // insert top link if these nodes contain @ least 1 non-whitespace character             items.last()                 .after('<a href="#top">back top</a>');         }     });      $('#container').find('span.temp').replacewith(function () {         return $(this).text();     });  });

here's jsfiddle


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more