Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the 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>Yes</span>
                         <span>-3 months</span>
                         <span>-6 months</span>
                         <span>No</span>
               </div>
    /***** want to retrieve 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>

Desiring to extract the 2 elements DIV and span that are already pre-commented.

I have created a function where I attempted to filter out the elements that have a specific style value: style="left: 0% (the Div & the span) . This is necessary to modify the style in those elements.

The function I came up with:

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

Unfortunately, it didn't work. Any ideas for improvement???

Answer №1

Here is a possible solution:

$("#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>Yes</span>
    <span>-3 months</span>
    <span>-6 months</span>
    <span>No</span>
  </div>

  <!-- Begin: need to retrieve these 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: need to retrieve these 2 elements -->

</div>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Capture an entire webpage screenshot with Webdrivercss

When trying to capture a screenshot of an entire webpage, I encountered a challenge. The code I used below with Firefox successfully took a screenshot of the whole page, but it didn't work with Chrome. According to the API documentation, I should use ...

Strategies for Effectively Managing Null Checks in Your JavaScript Project

When retrieving data from the BE API, it is in the format: { "details": { "address": { "street": "123/4", "city": "Banglore" } } } In our React project, we access this dat ...

Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

I have created a directive that restricts text input to only decimal numbers in the text field. Below is the code for the directive: import { HostListener, Directive, ElementRef } from '@angular/core'; @Directive({ exportAs: 'decimal ...

Issue with Vue: Calling method instantly when using :mouseover in v-for within a component

Whenever I try to incorporate :mouseover in a v-for loop within the <component>, I encounter an issue. The method assigned to the :mouseover event is triggered for each element, rather than just for the hovered elements. <Single-technology ...

Find and return a specific record from MongoDB if it matches the exact value

model.js import mongoose from 'mongoose'; const { Schema, Types } = mongoose; const participants = { user_id: Types.ObjectId(), isAdmin: Boolean } const groupSchema = new Schema({ id: Types.ObjectId(), // String is shorthand for {type: St ...

Having trouble with your Javascript Ajax call?

I've been attempting to make a POST request using Ajax, but I keep encountering an error with status code 0. Strangely, all the request parameters seem to be functioning correctly in the Advanced REST Client. Here's My Code Snippet: <button& ...

Passport JS fails to pass req.user data to Angular Controller

Currently, I am in the process of developing an application that utilizes an Express/Node backend along with Angular JS for the front end. This stack is fairly new to me, and I have been struggling with retrieving data in an Angular Service + Controller. ...

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

How to incorporate a JavaScript variable into an ERB tag

Exploring the integration of a JavaScript variable within erb <% %> tags has led me to consider using AJAX (refer to How to pass a javascript variable into a erb code in a js view?). As someone new to JavaScript and AJAX, it would be extremely helpfu ...

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

click events in backbone not triggering as expected

It's puzzling to me why this is happening. The situation seems very out of the ordinary. Typically, when I want an action to be triggered on a button click, I would use the following code snippet: events:{ 'click #button_name':'somefun ...

Repetitive cycling through an array

My array consists of classes: const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", ...

Overflowing text in the div element

Attempting to generate a sample document and aiming to enlarge the font-size by clicking the "Medium" & "Large" button. Encountering an issue where the font-size overlaps with other divs when pressing the "large" button, though not experiencing any proble ...

Checkboxes within div elements are unresponsive to clicks

As a novice, I am facing a simple issue. When I place an input checkbox inside the #container div, it functions correctly. However, when I try to put them within the #container div > #section div, they fail to work. *, html, body { box-sizing: b ...

Ways to guarantee that the factory promise is fulfilled prior to the execution of the

So far, I have always found valuable help by studying existing answers on stackoverflow, but now I've hit a roadblock. I'm currently working on an app that utilizes a directive to generate calendar month boxes. <app2directive class="column_5 ...

What is the reason for not modifying the filtered and sorted data?

I am currently working on implementing filter options for an item list, but I am facing an issue where the filtering does not work when selecting dropdown options. Array in App.jsx const cameraShowList=[ {id:1,model:"Canon",title:"Canon ...

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

Are HTML files and PHP generated files cached differently by web browsers?

My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

What is the best way to incorporate JavaScript code as React syntax?

For my project, I am using the OpenLayers API Map. I'm unsure of the correct way to incorporate JavaScript code in React or vice versa. Here is an answer on how to use markers in the map, but I am struggling to implement it in my current code since I ...