firasKoubaa firasKoubaa - 3 months ago 14
jQuery Question

How to get an element by its style : position left or right

I have this bloc , it's a slider element :

<div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" >
<div class="slider__interval">
<span>Oui</span>
<span>-3mois</span>
<span>-6mois</span>
<span>Non</span>
</div>
/***** want to recuper those 2 elements
<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%; left: 0%;"></div>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span>
*********/
</div>


And i wanna recuper the 2 elements DIV and span which are already prè-commented .

i have developped this fonction , where i have tried to filter out the elements which have the specific value of style : style="left: 0% (the Div & the span) . and i need that to change the style in those elements

My function:

function () {
var initDsiponibilite = $("#inputDisponibilite").attr("value");
alert(initDsiponibilite);
$("#sliderDispo").attr("data-slider-init",initDsiponibilite);
$.each( $("#sliderDispo").children().find().position.css('left','0%'))
{
$(this).attr("style","left:60%")
}


But that didn't work, , any suggestions ????

Answer

You might try something like this:

$("#sliderDispo")
  .children()
  .filter(function(){ return $(this).css("left") === "0%"; })
  .each(function(){ $(this).css("left", "60%"); });

console.log($("div.ui-slider-range")[0].style.left);
<div
  id="sliderDispo"
  class="slider slider-dispo"
  data-slider-init=""
  data-slider-color="#0077b5 #EC6E31 #E40B0B"
  data-slider-step="33">

  <div class="slider__interval">
    <span>Oui</span>
    <span>-3mois</span>
    <span>-6mois</span>
    <span>Non</span>
  </div>

  <!-- Begin: want to recuper those 2 elements -->
  <div
    class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"
    style="width: 0%; left: 0%;"></div>
  <span
    class="ui-slider-handle ui-state-default ui-corner-all"
    tabindex="0"
    style="left: 0%;"></span>
  <!-- End: want to recuper those 2 elements -->

</div>

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

Comments