JQuery выбрать следующий брат по классу с одним классом, который содержит несколько классов

Question

JQuery выбрать следующий брат по классу с одним классом, который содержит несколько классов

0

Хорошо, это звучит сложно, но это просто, но после 2 часов Googling я сдаюсь. Если бы кто-то мог помочь, я был бы бод

<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. Первый и последний классы добавляются к элементам li, динамически задаваемым коротким кодом [product_sku = 99 colums = 3 rows = 3], где colums = слева направо.

TL; DR используйте.next(), чтобы выбрать класс в элементе с несколькими классами. По умолчанию.next() не будет работать, если вы не перечислите каждый класс в этом элементе (насколько я могу собрать).

Думая об этом, я, вероятно, также должен проверить, что текущий элемент не содержит класс, который был последним перед поиском. В любом случае у кого-нибудь есть идеи? Я думаю, что это просто, но я не могу понять.

Изменение: попытка уточнить инструкцию TL;DR.

Sparatan117 20 сен. 2013, в 21:47

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Vlad · Accepted Answer · 2013-09-20T17-24-00.000Z

После всех комментариев, я думаю, что это может быть то, что вам нужно. Он будет вставлять новый 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

Клянусь, я могу обнять тебя прямо сейчас. Тьфу большое спасибо.