0

好吧，这听起来很复杂，但有点简单，但在谷歌搜索 2 小时后，我放弃了。如果有人可以请帮助我会很高兴

<ul class="products">
    <li class="post-93 product type-product status-publish hentry first instock"></li>
    <li class="post-87 product type-product status-publish hentry instock"></li>
    <li class="post-85 product type-product status-publish hentry last instock"></li>
    <li class="post-78 product type-product status-publish hentry first instock"></li>
</ul>

这是我到目前为止的jquery。

$('.products > li').click(function(e){
        e.preventDefault();
        $(this).next(".last").insertAfter( /* a piece of html will go here */));
    })

该列表是由 Wordpress 动态生成的，与其自己尝试破解代码，我更愿意操纵屏幕上的内容。

最终结果是用一种下拉样式框显示产品，就像在谷歌图片搜索中一样。第一个和最后一个类被添加到由短代码 [product_sku=99 colums=3 rows=3] 动态设置的 li 项目中，其中 colums = 从左到右。

TL;DR使用 .next() 在具有多个类的元素中选择一个类。默认情况下，除非您列出该元素中的每个类（据我所知），否则 .next() 将不起作用。

考虑到这一点，我可能还需要在搜索之前检查当前元素是否不包含最后一个类......无论如何有人有任何想法吗？我认为这很简单，但我无法弄清楚。

编辑：试图澄清 TLDR 声明。

4

1 回答 1

0

在所有评论之后，我认为这可能就是您所追求的。每当您单击 li 时，它将在li之后插入一个新的。.last

$('.products').on('click', 'li', function(e) {
  // get any data from clicked li by using $(this)

  // only look for product li
  $('li.last.product').after('<li>yo</li>');
});

http://jsbin.com/eXAfArA/1/edit

于 2013-09-20T19:13:42.290 回答