Selecy dynamic variable using JQuery

1 Views

I’m using the “pbd-ajax-load-posts” WordPress plugin for pagination on load more button. Bottom of the code, code author appends new class each time button the .btn-more is clicked. So I need to add a separator after even posts. I append after that class which has even class – my separator line.

So, I need to target that “pbd-alp-placeholder-xx” dynamically, so it does not add the line, where’s already added.

Read More
 $('#content') .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

This is some lines of code: 

$('.btn-more').click(function() {

    // Are there more posts to load?
    if(pageNum <= max) {

        // Show that we're working.
        $(this).text('Loading posts...');

        $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
            function() {
                // Update page number and nextLink.
                pageNum++;
                nextLink = nextLink.replace(/paged[=].[0-9]?/, 'paged='+ pageNum);

                // Add a new placeholder, for when user clicks again.
                $('#content')
                    .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')


            $(".pbd-alp-placeholder- .even").append('<img src="http://webpage/wp-content/themes/funky/img/two-line-seperator.png" style="width:100%; margin: 25px 0; height: 4px;"/>');

I tried something like that, but it didn `t woked out . 

$(".pbd-alp-placeholder-'+ pageNum +' .even")
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. FIRST OPTION:

    Since the developer is appending the code …

    $('#content')
  .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

    … could’t you simply add something like …

    $('#content')
  .append('<div class="pbd-break pbd-alp-placeholder-'+ pageNum +'"></div>')

    … the pbd-break class and this to the CSS code.

    .pd-break {
    border-bottom: 1px solid black;
}

    SECOND OPTION:

    Or, you could simply change the same first line like this …

    $('#content')
  .append('<div class="pbd-break pbd-alp-placeholder-'+ pageNum +'"></div>')
  .append("<hr/>")

    … you could effectively put whatever HTML you wanted where the <hr/> is …

  2. Although the code you posted is not quite clear (blocks not closed and indents a bit confusing), I’d give it a shot:

    // Add a new placeholder, for when user clicks again.
var placholder = $('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>');
$('#content').append(placeholder);
$(placeholder).append('<img src="http://webpage/wp-content/themes/funky/img/two-line-seperator.png" style="width:100%; margin: 25px 0; height: 4px;"/>');

    Now again, there is nothing in the code explaining how you get the “.even” class, so I just skipped that part. But if you can figure out how to add the class, you’ll figure out how to modify the separator logic.