एक html पृष्ठ से मैं querySelectorAll. के माध्यम से एक नोडलिस्ट प्राप्त करने में सक्षम था उसके बाद एक चक्र के माध्यम से मुझे वह नोड मिला जिसमें मुझे काम करने की आवश्यकता है:

इस प्रारूप के साथ एक नोडलिस्ट के नोड को देखते हुए:

<div id="search_filters">
 <section class="facet clearfix">
   <p>something3</p>
   <ul>
     <li>text1 abc-def 200-201<span>(35)</span></li>
     <li>text2 hjk-lef 203 <span>(11)</span></li>
     <li>text3 fgh 204 <span>(250)</span></li>
     <li>text4 sfsa 205 <span>(100)</span></li>
   </ul>
  </section>
</div>

मैं जो कोशिश कर रहा हूं वह <li> को संख्यात्मक तरीके से क्रमबद्ध करना है।

उदाहरण के लिए, यदि मेरे पास इस तरह के कई li टेक्स्ट हैं:

1) abc-def 200-201
2) fgh 204
3) hjk-lef 203

मैं उन्हें इस तरह छाँटना चाहता हूँ (आखिरी संख्या वह है जो मामले में छाँटने के लिए मायने रखती है (3) क्या मामला 201 है):

1) fgh 204
2) hjk-lef 203
3) abc-def 200-201

मैं एक बार हालांकि शब्दों को एक अस्थायी नोड पर ट्रिम करना और अवरोही तरीके से संख्या को सॉर्ट करना संभव होगा, लेकिन मुझे उस नोड पर सही ऑर्डर डालने में परेशानी हो रही है जिसमें मुझे काम करने की ज़रूरत है।

कोई विचार?

0
costabrava 11 अक्टूबर 2019, 13:38

1 उत्तर

सबसे बढ़िया उत्तर

सॉर्ट प्रोटोटाइप और रेगुलर एक्सप्रेशन

<section class="facet clearfix">
  <ul id="facet_67493" class="collapse">
    <li>
      <label class="facet-label" for="facet_input_67493_0">
      <span class="custom-checkbox">
        <input id="facet_input_67493_0" data-search-url="#?q=Stagione-Autunno--Inverno+2014--2015" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>
      <a href="#?q=Stagione-Autunno--Inverno+2014--2015" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2014-2015
        <span class="magnitude">(1)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_1">
      <span class="custom-checkbox">
        <input id="facet_input_67493_1" data-search-url="#?q=Stagione-Autunno--Inverno+2015--2016" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Autunno--Inverno+2015--2016" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2015-2016
        <span class="magnitude">(3)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_2">
      <span class="custom-checkbox">
        <input id="facet_input_67493_2" data-search-url="#?q=Stagione-Autunno--Inverno+2016--2017" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Autunno--Inverno+2016--2017" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2016-2017
        <span class="magnitude">(27)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_3">
      <span class="custom-checkbox">
        <input id="facet_input_67493_3" data-search-url="#?q=Stagione-Autunno--Inverno+2017--2018" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Autunno--Inverno+2017--2018" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2017-2018
        <span class="magnitude">(75)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_4">
      <span class="custom-checkbox">
        <input id="facet_input_67493_4" data-search-url="#?q=Stagione-Autunno--Inverno+2018--2019" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Autunno--Inverno+2018--2019" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2018-2019
        <span class="magnitude">(203)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_5">
      <span class="custom-checkbox">
        <input id="facet_input_67493_5" data-search-url="#?q=Stagione-Autunno--Inverno+2019--2020" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Autunno--Inverno+2019--2020" class="_gray-darker search-link js-search-link" rel="nofollow">
        Autunno-Inverno 2019-2020
        <span class="magnitude">(268)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_6">
      <span class="custom-checkbox">
        <input id="facet_input_67493_6" data-search-url="#?q=Stagione-Primavera--Estate+2015" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Primavera--Estate+2015" class="_gray-darker search-link js-search-link" rel="nofollow">
        Primavera-Estate 2015
        <span class="magnitude">(1)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_7">
      <span class="custom-checkbox">
        <input id="facet_input_67493_7" data-search-url="#?q=Stagione-Primavera--Estate+2016" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Primavera--Estate+2016" class="_gray-darker search-link js-search-link" rel="nofollow">
        Primavera-Estate 2016
        <span class="magnitude">(3)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_8">
      <span class="custom-checkbox">
        <input id="facet_input_67493_8" data-search-url="#?q=Stagione-Primavera--Estate+2017" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Primavera--Estate+2017" class="_gray-darker search-link js-search-link" rel="nofollow">
        Primavera-Estate 2017
        <span class="magnitude">(61)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_9">
      <span class="custom-checkbox">
        <input id="facet_input_67493_9" data-search-url="#?q=Stagione-Primavera--Estate+2018" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Primavera--Estate+2018" class="_gray-darker search-link js-search-link" rel="nofollow">
        Primavera-Estate 2018
        <span class="magnitude">(220)</span>
      </a>
    </label>
    </li>

    <li>
      <label class="facet-label" for="facet_input_67493_10">
      <span class="custom-checkbox">
        <input id="facet_input_67493_10" data-search-url="#?q=Stagione-Primavera--Estate+2019" type="checkbox">
        <span class="ps-shown-by-js"><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
      </span>

      <a href="#?q=Stagione-Primavera--Estate+2019" class="_gray-darker search-link js-search-link" rel="nofollow">
        Primavera-Estate 2019
        <span class="magnitude">(433)</span>
      </a>
    </label>
    </li>
  </ul>
</section>
const needle = "something3";
const selection = document.querySelectorAll('section.facet.clearfix');
let i = -1;
let targetIndex;
while(++i < selection.length){
  if(selection[i].innerHTML.indexOf(needle) > -1){
    targetIndex = i;
  }
}
const getNum = function(node, innerElement){
  const target = node.querySelector(innerElement);
  if(!target){
    console.warn("No matches for inner selector");
    return 0;
  }
  let haystack = ""
  if(target.childNodes.length > 0){
     haystack = target.childNodes[0].textContent;
  }
  else{
    haystack = target.innerHTML;
  }
  // console.info("haystack", haystack);
  const numericMatches = (haystack).match(/\d{1,}/g);
  const result = +numericMatches[numericMatches.length-1];
  console.info("RESULT", result);
  return result;
};
const ul = selection[targetIndex].querySelector("ul");
const lis = [...ul.querySelectorAll("li")].sort(function(a, b){
  return getNum(b, "a") - getNum(a, "a");
});
i = -1; // We already declared this above
while(++i < lis.length){
    ul.appendChild(lis[i]);
}



यहां कोडपेन

1
Sampgun 12 अक्टूबर 2019, 19:51