jQuery 按类选择下一个同级，其中一个类包含多个类

jQuery select next sibling by class with one class that contains multiple classes

本文关键字：一个 包含多 选择 下一个 jQuery      更新时间：2023-09-26

好吧，这听起来很复杂，但有点简单，但是经过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 列=3 行=3] 动态设置的 li 项中，其中列 = 从左到右。

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

考虑到这一点，我可能还需要在搜索之前检查当前元素是否不包含该类。反正有人有什么想法吗？我认为这很简单，但我无法弄清楚。

编辑：试图澄清TLDR声明。

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

$('.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

相关文章：