Сортировка элементов, подобных другим по тексту

Question

Я понятия не имею, попробуйте найти простой способ сортировки товаров в 2 родителях, как другой. Я так плохо о функции сортировки

HTML:

<div class="a"> 
    <h2>A :</h2> 
    <li>One</li> 
    <li>2</li> 
    <li>Ipsum</li> 
    <li>4</li> 
    <li>5</li> 
</div> 

<div class="b"> 
    <h2>B :</h2> 
    <span>#5</span> 
    <span>#One</span> 
    <span>#Ipsum</span> 
    <span>#4</span> 
    <span>#2</span> 
</div> 

.b сортирует так же, как .a

Для этого:

<div class="b"> 
    <h2>B :</h2> 
    <span>#One</span> 
    <span>#2</span> 
    <span>#Ipsum</span> 
    <span>#4</span> 
    <span>#5</span> 
</div> 

Это мой JQuery я так далеко:

var $a_items = $('.a li'); 
var $b_items = $('.b span') 

for(var i = 0; i < $a_items.length; i++){ 
    var $a_item = $($a_items[i]); 
    var $a_text = $a_item.text(); 

    var $b_target = $b_items.filter(function(){return $(this).text()=='#'+$a_text;}); 

} 

Живая демонстрация:http://jsfiddle.net/nu6zts1y/

Я ищу хорошую производительность также (Native JS можно использовать)

---

Обновлено: Так извините, текст будет текст, а не только номер

Answer 1

Update

Вы можете использовать Array.prototype.sort() и вручную карта/проверка номера строк

var map = { 
 
    '#One': 1, 
 
    '#Two': 2, 
 
    '#Three': 3, 
 
    '#Four': 4, 
 
    '#Five': 5 
 
}; 
 
$('.b').append($($('.b span').get().sort(function(a, b) { 
 
    var aInt = !parseInt(a.textContent.replace('#', '')) ? map[a.textContent] : a.textContent.replace('#', ''); 
 
    var bInt = !parseInt(b.textContent.replace('#', '')) ? map[b.textContent] : b.textContent.replace('#', ''); 
 

 
    if (aInt < bInt) { 
 
    return -1; 
 
    } 
 
    if (aInt > bInt) { 
 
    return 1; 
 
    } 
 
    // a must be equal to b 
 
    return 0; 
 
})));

div { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    width: 100px; 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
li, 
 
span { 
 
    display: block; 
 
    border-bottom: 1px solid #888; 
 
} 
 
.junk { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="a"> 
 
    <h2>A :</h2> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</div> 
 

 
<div class="b"> 
 
    <h2>B :</h2> 
 
    <span>#5</span> 
 
    <span>#One</span> 
 
    <span>#3</span> 
 
    <span>#4</span> 
 
    <span>#2</span> 
 
</div>

Answer 2

Вы можете использовать:

$('.b').find('span').sort(function (a, b) { 
    return parseInt($(a).html().replace('#',''),10) -parseInt($(b).html().replace('#',''),10) 
}).appendTo('.b'); 

Working Demo