Wordpress Read More jQuery

Question

I'm building a Wordpress site and wrote some code that takes overflow text from one <div> to another. I want my clients to be able to insert the break from the .featured div to the .overflow div on their own using Wordpress' "Read More" insert.

This just adds a comment that says  into the p element. See example:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   <!--more-->
   Ut enim ad minim veniam, <span>quis nostrud exercitation</span> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

What I want to do is use jQuery to select all the text before and after the , then I can store them in two variables and move them around where I need them.

Note: any inline HTML tags (strong,em,a,span, etc) need to be saved in those variable as well.

I've been messing around with $('p').text().split('');, but there's still something I'm missing.

Thanks.

@yezzz Yes, I spell out jQuery instead of using $ when I work on Wordpress. — Samuel Granger, Apr 27 '17 at 21:47
@BrianOgden That's not always the case when working in Wordpress — sm1215, Apr 27 '17 at 21:53
By default `$` doesn't work in wordpress. If I recall correctly this is due to wp forcing strict mode. — yezzz, Apr 27 '17 at 21:59
@yezz and what does that have to do with the ops question? Do you gather from the question that $ does not work for him? — Brian Ogden, Apr 27 '17 at 22:01
I gather from the question he's trying to make $ prefixed code work in wordpress — yezzz, Apr 27 '17 at 22:03
Actually, WordPress loads jQuery in [no-conflict mode](https://api.jquery.com/jquery.noconflict/) - you can reference the `$` IF you use a no-conflict-mode safe document ready, such as `jQuery(function($) { // .. $ is OK in here });` — random_user_name, Apr 27 '17 at 22:25
@BrianOgden- I'd gently request you delete your comments suggesting that `$` and `jQuery` are interchangeable. They *are not* in a WordPress environment. — random_user_name, Apr 27 '17 at 22:30
@You think the OP's problem is being caused because $ prefix is not working, is that right? — Brian Ogden, Apr 27 '17 at 22:30
@BrianOgden - My concern is for future visitors: it is confusing to people that don't know that jQuery in WordPress will FAIL if you use `$` outside of a properly set up document ready. — random_user_name, Apr 27 '17 at 22:31
@cale_b thanks, yeah that was it. And I know there's workarounds. — yezzz, Apr 27 '17 at 22:31
@BrianOgden: I was trying to rule out that `$` was the problem. I believe the comments section is for these types of matters, before giving an answer, correct? — yezzz, Apr 27 '17 at 22:34
Possible duplicate of [WordPress Plugin Development - How to use JQuery / JavaScript?](http://stackoverflow.com/questions/16823679/wordpress-plugin-development-how-to-use-jquery-javascript) — random_user_name, Apr 28 '17 at 15:43

Drew Baker · Answer 1 · 2017-04-27T22:23:16.460

Could you do this in PHP? For example, here is what I've done in the past when I want to toggle down the text after the "more" tag on click:

<?php 
    global $more;
    $more = 0;
    $has_more = strpos($post->post_content, '<!--more-->'); 
?>

<div class="entry">    
    <?php 
        the_content(false); 
        $more = 1;
    ?>

    <?php if($has_more) : ?>

        <div class="more">
            <?php the_content(false, true); ?>
        </div>
        <span class="more-toggle">More</span>

    <?php endif; ?>
</div>

Then use jQuery to .slideToggle() .more when clicking on .more-toggle.

Notice the global $more that is a special WordPress var for doing this sort of thing.

yezzz · Accepted Answer · 2017-04-27T23:10:29.000

0

Use .html() instead:

var myArr = jQuery('p').html().split('<!--more-->');

demo: https://jsfiddle.net/4can270u/1

EDIT: of course you need to ensure you're using the correct selector

edited Apr 27 '17 at 23:10

answered Apr 27 '17 at 22:42

yezzz

2,990
1
10
19

This is exactly what I'm looking for! – Samuel Granger May 11 '17 at 17:45

score -1 · Answer 3 · edited May 23 '17 at 12:02

-1

 does not exist in the return of your $('p').text(). No HTML comments exist in jQuery.text().

Thus cannot split the text into an Array of two string items on the HTML comment. jQuery does not treat the comment as normal text, that is why, when you call $('p').text().split('') the Array is of length 1;

Try this:

$('p').text().split('consectetur');

See how your text is actually split into an Array of two items and has a length = 2.

You may need to use jQuery selectors to find the HTML comment  in the <p> and then select the text after that if possible.

See here: Get text inside HTML comment tag?

And here: Selecting HTML Comments with jQuery

edited May 23 '17 at 12:02

Community

1
1

answered Apr 27 '17 at 21:55

Brian Ogden

18,439
10
97
176

WordPress loads jQuery in [no-conflict mode](https://api.jquery.com/jquery.noconflict/) - you can not reference the `$` **unless** you use a no-conflict-mode safe document ready, such as `jQuery(function($) { // .. $ is OK in here });` – random_user_name Apr 27 '17 at 22:26
@cale_b thanks, I deleted my comments you referred to so no one is given incorrect information :) – Brian Ogden Apr 28 '17 at 23:04

Wordpress Read More jQuery

3 Answers3