Jump to content
Sign in to follow this  
cha0s

[Решено] Вопрос про Jquery

Recommended Posts

Такая проблема имеется много блоков div Такого вида <div position="1" ....></div> как с помощью jquery прочитать все блоки у которых есть уникальный параметр position, а так-же считать его значение, логика такая что блоки будут расставляться в зависимости от своей позиции, позиция может быть так-же и <div position="1,1" ....></div> который будет говорить о том что блок находиться в первом блоке и самый первый по позиции... Как будет выглядит код на Jquery подобного? 

Share this post


Link to post
Share on other sites


$('div[position]').each(function(i, e) {

    console.log($(e).attr('position'));

});

  • +1 1

Share this post


Link to post
Share on other sites

а такой вопросик еще имеется такая структура

<div id="content">
    <div position="4">......</div>
    <div position="1">......</div>
    <div position="3">......</div>
    <div position="2">......</div>
    <div position="5">......</div>
</div>


 
как с помощью jquery мне их расставить упорядочено?
 
<div id="content">
    <div position="1">......</div>
    <div position="2">......</div>
    <div position="3">......</div>
    <div position="4">......</div>
    <div position="5">......</div>
</div>

Спасибо кто может помочь в этом divov может быть n-ное количество...

Share this post


Link to post
Share on other sites

Такой скелет 

<div id="content">
    <div position="1,1">test</div>
    <div position="1">test</div>
    <div position="1,5">test</div>
    <div position="1,2">test</div>
    <div position="1,2,1">test</div>
    <div position="1,4">test</div>
</div>
<div id="results">
</div>

Как их с помощью JS разобрать чтоб получить сортировку такого вида

 

<div position="1">test</div>

<div position="1,1">test</div>
<div position="1,2">test</div>

<div position="1,2,1">test</div>

<div position="1,4">test</div>
<div position="1,5">test</div>

 

То есть сначала скрипт смотрит только те элементы у которых первый символ 1, потом он смотрит после запятой 2-ой символ, и так может быть сколько угодно вложенности, пока он не отсортирует.

 

Есть пример такого скрипта

var myArray = $("#content div");
myArray.sort(function (a, b) {

    // convert to integers from strings
    a = parseInt($(a).attr("position"));
    b = parseInt($(b).attr("position"));

    // compare
    if(a > b) {
        return 1;
    } else if(a < b) {
        return -1;
    } else {
        return 0;
    }
});

// put sorted results back on page
$("#results").append(myArray);

Он сортирует только целые числа, как сюда добавить разбор этой строки по символьно ну чтоб он по вложенности проходил? на php есть функции работы со стороками типа strpos ищем разделитель запятую и пошли, а как это на JS будет все выглядеть?

 

Share this post


Link to post
Share on other sites

По сути тут в примере если убрать конвертирование строки к числу, то он уже начинает сам двигаться в нужной позиции 

var myArray = $("#content div");
myArray.sort(function (a, b) {

    a = $(a).attr("position");
    b = $(b).attr("position");

    // compare
    if(a > b) {
        return 1;
    } else if(a < b) {
        return -1;
    } else {
        return 0;
    }
});

// put sorted results back on page
$("#results").append(myArray);

Такой сценарий выдает по шаблону 

<div id="content">
    <div position="1,1">2</div>
    <div position="1">1</div>
    <div position="1,5">6</div>
    <div position="1,2">3</div>
    <div position="1,2,1,1">4</div>
    <div position="1,4">5</div>
    <div position="2">7</div>
    <div position="16">8</div>
</div>
<div id="results">
</div>

Такой результат:

 

1
2
3
4
5
6
8
7
 
он сам эти вся запятые сравнил правильно, только строку 2 он считает больше чем 16 )

Share this post


Link to post
Share on other sites

потому что двойку сравнивает с первой цифрой в строке (именно строке, а не числе) 16.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.