Question

好吧这听起来很复杂，但有点简单，但是经过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动态生成的，而不是自己尝试和破解代码，我宁愿只是操纵屏幕上的内容。

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

TL; DR 使用.next（）在具有多个类的元素中选择一个类。默认情况下.next（）将不起作用，除非您列出该元素中的每个类（就我可以收集而言）。

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

编辑：试图澄清TLDR声明。

Answer 1

在所有评论之后，我认为这可能是你所追求的。每当您点击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

jQuery按类选择下一个兄弟，其中一个类包含多个类

1 个答案: