如何通过其样式获取元素：左侧或右侧位置(How to get an element by its style : position left or right)

我有这个集团，它是一个滑块元素：

<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>

而且我想要回收已经过评论的2个元素DIV和span 。

我已经开发了这个功能，我试图过滤掉具有特定风格值的元素： style =“left：0％ （Div＆the span）。我需要改变这些元素的风格

我的功能：

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%") }

但那没用，任何建议????

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 ????

最满意答案

您可以尝试这样的事情：

$("#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> 
  
 
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>

更多推荐