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

Posted 2023-02-25

【中文标题】jQuery 按类选择下一个兄弟，其中一个类包含多个类

【英文标题】：jQuery select next sibling by class with one class that contains multiple classes

【发布时间】：2013-09-20 18:47:30

【问题描述】：

好吧，这听起来很复杂，但有点简单，但在谷歌搜索 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 声明。

【问题讨论】：

我不明白你的目标是什么。 “我需要从行中的下一个兄弟中选择“.last”类。”根据您发布的 HTML 对我来说没有意义。

如果我要单击 ，我想在下一个兄弟 ( ) 之后插入一个 div ".last" 的类，在这种情况下为

一个 div 不能是一个 UL 的子元素，所以你可能是指一个 LI 元素，并且你已经有一个具有该类的 LI 元素，应该只是向上移动，或者应该是一个新的元素被插入。你写了很多，但几乎没有描述？

被点击的元素似乎与查找所需位置无关。点击似乎只是作为触发器在最后一个类的 LI 之后插入一些东西。

虽然这是真的，但我可以添加一个 bar 这几乎就像 php 标签的反向逻辑，但它仍然会满足要求。 @j08691 对，但在这种情况下，我从 LI 获取产品代码（类），然后将其与数量选择器一起显示在一个较大的框中，并在该行元素下方添加到购物车

【参考方案1】：

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