Question

任何人都可以看看这个，并为我提供更好的解决方案，以便它可以工作。我已经在这方面打了个招呼，如果你能帮我解决的话。你会被记住。

问题：我有一个变量，它将保存下面的div值。我正在动态构建它，我想按字母顺序排序并显示它。

Var toSort = "<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1260' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/>"

在上面的代码中，将动态分配div元素Id。请帮助解决问题。

Answer 1

这意味着像这样按ID排序吗？

＆＃13;

$("#btn1, #btn2").prop('disabled', true);

＆＃13;

Answer 2

首先我会为它使用一个数组，并且首先使用jquery创建一个元素，以便更容易访问它。

您可以使用＆＃34; localecompare＆＃34;

轻松对其进行排序

＆＃13;

var yourElements = [];

yourElements.push( $("<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div>")[0]);
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div>")[0]);
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div>")[0]);
yourElements.push( $("<div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div>")[0]);
yourElements.push( $("<div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div>")[0]);

yourElements.sort(function(a,b)
{

 return a.innerText.localeCompare(b.innerText);

});

console.log(yourElements);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

这是实现所需排序的完美方式。虽然已经发布的答案很少。我希望你看一下。

$(document).ready(function(){

var toSort = "<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1260' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/>",

 i, switching, b, shouldSwitch, divs;
 $('#container').append(toSort);

 
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    //Loop through all divs items:
    divs = $('.touchpoint_filterattributes');
    for (i = 0; i < (divs.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*check if the next item should
      switch place with the current item:*/
      if ($(divs[i]).find('.color_box_label').text().toLowerCase() > $(divs[i+1]).find('.color_box_label').text().toLowerCase()) {
        /*if next item is alphabetically lower than current item,
        mark as a switch and break the loop:*/
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark the switch as done:*/
      divs[i].parentNode.insertBefore(divs[i + 1], divs[i]);
      switching = true;
    }
  }
   $('#container').append(divs);

});

.touchpoint_filterattributes{margin:20px 0px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'></div>

对存储在变量中的div内容进行排序

3 个答案: