使用 JQuery 选择动态变量答案

【问题标题】：Selecy dynamic variable using JQuery使用 JQuery 选择动态变量
【发布时间】：2014-12-21 11:20:27
【问题描述】：

我正在使用“pbd-ajax-load-posts”WordPress 插件在加载更多按钮时进行分页。代码底部，每次单击 .btn-more 按钮时，代码作者都会附加新类。所以我需要在偶数帖子之后添加一个分隔符。我在具有偶数类的类之后追加 - 我的分隔线。

所以，我需要动态定位“pbd-alp-placeholder-xx”，所以它不会添加已经添加的行。

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

这是几行代码：

$('.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;"/>');

我尝试了类似的方法，但它没有被唤醒。

$(".pbd-alp-placeholder-'+ pageNum +' .even")

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

第一选择：

由于开发人员正在附加代码...

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

...你不能简单地添加类似...的东西

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

...pbd-break 类和 CSS 代码。

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

第二个选项：

或者，您可以像这样简单地更改相同的第一行...

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

...您可以有效地将任何您想要的 HTML 放在 <hr/> 所在的位置...

【讨论】：

【解决方案2】：

虽然你发布的代码不是很清楚（块没有关闭并且缩进有点混乱），但我会试一试：

// 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;"/>');

再一次，代码中没有任何内容解释如何获得“.even”类，所以我跳过了那部分。但是如果你能够弄清楚如何添加类，你就会弄清楚如何修改分隔符逻辑。

【讨论】：