Множество переключателей с помощью jQuery

Question

Множество переключателей с помощью jQuery

0

пожалуйста, помогите мне, мне нужно заменить метки (switch) в структуре DOM. У меня есть это:

<div class="wrap">
    <ul>
        <li>
            <div class="block">
                <div class="title">title 1</div>
                <div class="image">image 1 for title 1</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 2</div>
                <div class="image">image 2 for title 2</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 3</div>
                <div class="image">image 3 for title 3</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 4</div>
                <div class="image">image 4 for title 4</div>
            </div>
       </li>
   </ul>            
</div>

И мне нужно это в результате, как мне его получить?

<div class="wrap">
            <ul>
                <li>
                    <div class="block">
                        <div class="image">image 1 for title 1</div>
                        <div class="title">title 1</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 2 for title 2</div>
                        <div class="title">title 2</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 3 for title 3</div>
                        <div class="title">title 3</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 4 for title 4</div>
                        <div class="title">title 4</div>
                    </div>
                </li>
            </ul>
      </div>

Я пытался использовать jQuery .each() но в результате я получаю структуру, подобную этой

Изображение 4
Изображение 3
Изображение 2
Изображение 1
название 1
изображение 4
изображение 3
изображение 2
изображение 1
название 2
изображение 4
изображение 3
изображение 2
изображение 1
название 3
изображение 4
изображение 3
изображение 2
изображение 1
название 4

Siada 03 март 2014, в 17:20

Источник

0

Покажите свой код, пожалуйста.
isherwood 03 март 2014, в 15:55
0

Добро пожаловать в StackOverflow. whathaveyoutried.com ? Пожалуйста, покажите нам, что у вас есть. SO не является службой написания кода, и вы получите лучший ответ, если представите доказательства своей работы. Пожалуйста, смотрите страницы справки .
freefaller 03 март 2014, в 15:56
0

Начните с закрытия титровальных элементов.
adeneo 03 март 2014, в 16:05

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

2 ответа

1

Вы можете использовать insertBefore()

$.each($('.wrap .image'), function() {
    $(this).insertBefore($(this).prev());
});

Btw, ваша разметка HTML недопустима, вы должны закрыть div с title класса, используя </div> и я исправил его для вас в демо.

Демо-версия скрипта

Felix 03 март 2014, в 13:49

Ещё вопросы

Добро пожаловать в StackOverflow. whathaveyoutried.com ? Пожалуйста, покажите нам, что у вас есть. SO не является службой написания кода, и вы получите лучший ответ, если представите доказательства своей работы. Пожалуйста, смотрите страницы справки .
Начните с закрытия титровальных элементов.

Arun P Johny · Accepted Answer · 2014-03-03T13-08-00.000Z

Попробуйте .before()

$('.block .title').before(function(){
    return $(this).next()
})

Демо: скрипка