Поиск элемента с ценой больше 100

158

13 декабря 2019, 16:40

Как мне пропарсить элемент с ID=BETS и достать все числа из data-worth со всех элементов и если моё число больше добавить выше этого элемента мой элемент. если моё число например больше 100 то добавляем элемент выше или ниже в соответствие с числом

<div id="bets"> 
  <!-- <div class="bets-content" data-worth="101"></div> допустим моё число 101 добавляем сюда элемент выше всех--> 
  <div class="bets-content" data-worth="100"></div> 
  <div class="bets-content" data-worth="89"></div> 
  <div class="bets-content" data-worth="59"></div> 
</div>

Answer 1

Способов можно много придумать. В любом случае вам потребуется перебрать элементы и найти первый из них, которых подходит под условие. Перед ним и добавить, а если не нашлось, то добавить в конец.

$("button").click(function(){ 
   var v = +$("input").val(); 
    
   var $div = $("<div>") 
                   .addClass('bets-content') 
                   .data('worth', v) 
                   .text(v) ; 
                    
   $bets = $(".bets-content").filter(function(){ 
                     return v > +$(this).data('worth'); 
                }).first(); 
              
   $bets.length ? $div.insertBefore($bets) : $div.appendTo("#bets");       
});

#bets { border:1px solid red; } 
.bets-content {border:1px solid blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<input/><button>+</button> 
<div id="bets">   
  <div class="bets-content" data-worth="100">100</div> 
  <div class="bets-content" data-worth="89">89</div> 
  <div class="bets-content" data-worth="59">59</div> 
</div>

Answer 2

Вариант на чистом JavaScript.

var b = document.getElementById('bets'); 
var a = [...b.querySelectorAll('[data-worth]')]; 
var m = a.find(e => e.dataset.worth > 100); 
 
var d = document.createElement('div'); 
d.dataset.worth = 123; 
b.insertBefore(d, m);

[data-worth]::after { 
  content: attr(data-worth); 
}

<div id="bets"> 
  <div class="bets-content" data-worth="38"></div> 
  <div class="bets-content" data-worth="112"></div> 
  <div class="bets-content" data-worth="89"></div> 
  <div class="bets-content" data-worth="59"></div> 
</div>