Skip to content
Fix Code Error

jQuery how to find an element based on a data-attribute value?

March 13, 2021 by Code Error
Posted By: Anonymous

I’ve got the following scenario:

var el = 'li';

and there are 5 <li>‘s on the page each with a data-slide=number attribute (number being 1,2,3,4,5 respectively).

I now need to find the currently active slide number which is mapped to var current = $('ul').data(current); and is updated on each slide change.

So far my tries have been unsuccessful, trying to construct the selector that would match the current slide:

$('ul').find(el+[data-slide=+current+]);

does not match/return anything…

The reason I can’t hardcode the li part is that this is a user accessible variable that can be changed to a different element if required, so it may not always be an li.

Any ideas on what I’m missing?

Solution

You have to inject the value of current into an Attribute Equals selector:

$("ul").find(`[data-slide='${current}']`)

For older JavaScript environments (ES5 and earlier):

$("ul").find("[data-slide='" + current + "']"); 
Answered By: Anonymous

Related Articles

  • jQuery Mobile: document ready vs. page events
  • Ukkonen's suffix tree algorithm in plain English
  • Form field border-radius is not working only on the…
  • How to VueJS router-link active style
  • Individual click handlers in v-for loop
  • Slide transition with vue isn't working properly
  • "Thinking in AngularJS" if I have a jQuery background?
  • center images with each other in logo carousel
  • Javascript text animation not triggering
  • How to change the color of vaadin-select-text-field…
  • @selector() in Swift?
  • Hide navigation arrows depending on the active class…
  • Vuetify Navigation Drawer works once then stops
  • Is it possible to apply CSS to half of a character?
  • After a little scroll, the sticky navbar just is not…
  • Latest jQuery version on Google's CDN
  • How I can use vue-awesome-swiper with slideTo()?
  • filter and sort an array of objects in Vue
  • vue-awesome-swiper(swiperjs) on Nuxt js not working…
  • Is it possible to have Aurelia components feed…
  • center 3 items on 2 lines
  • Python, Username and Password with 3 attempts
  • Vue.js transition and transition-group animations…
  • Vue.js page transition fade effect with vue-router
  • How does PHP 'foreach' actually work?
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • Vue js vuecli3 application does not work in ie11…
  • Watch $route.params.slug doesn't triggered vuejs
  • Active tab issue on page load HTML
  • How to use Servlets and Ajax?
  • The definitive guide to form-based website authentication
  • How to add Css Class to item inside Ember's…
  • How to add jQuery code into HTML Page
  • Why my vue Leave transition not working?
  • What are the currently supported CSS selectors…
  • Sort table rows In Bootstrap
  • Twitter Bootstrap Datepicker within modal window
  • performSelector may cause a leak because its…
  • Jquery If radio button is checked
  • Constructing dynamic lists of lists with Polymer
  • How to add css image backgrounds in Vue-js so…
  • Polymer property as css selector is not working
  • Smart way to truncate long strings
  • What are the undocumented features and limitations…
  • Class combination not applying new style
  • Downloading jQuery UI CSS from Google's CDN
  • Vue.js, how to add/modify css class inside slot from parent
  • CSS selector for first element with class
  • Rails wrong number of arguments error when…
  • Optimal expression to evaluate condition and set…
  • jQuery.on() Delegation: Slightly complex selector…
  • Hibernate table not mapped error in HQL query
  • Do not close the mode in the mouse up event
  • Data binding/updating between parent and child using…
  • How to add class active on specific li on user click…
  • jQuery Add class to element if data attribute…
  • Vue Carousel not sliding correctly
  • Remove complete node from XML, if the child…
  • Reference to Object is lost somehow
  • What does AngularJS do better than jQuery?
  • Am I paranoid? "Brutally" big Polymer website after…
  • Add polymer-dart element to div
  • jQuery.active function
  • How should a model be structured in MVC?
  • jquery - return value using ajax result on success
  • How to set HTML5 required attribute in Javascript?
  • Using the result of a query to display images inside…
  • au build complains about file not found or accessible
  • How to make Vuetify App bar scrollable horizontally
  • Trying to reduce repetition of HTML code using JavaScript
  • Backbone DOM events firing multiple times
  • Aurelia: How to revert back to original model before bind
  • How to handle initializing and rendering subviews in…
  • Using in Polymer 2.x
  • Replace the UUIDs with Strings
  • data.table vs dplyr: can one do something well the…
  • SQL query return data from multiple tables
  • javax.faces.application.ViewExpiredException: View…
  • Managing jQuery plugin dependency in webpack
  • Set attribute from Polymer object property value
  • Style jQuery autocomplete in a Bootstrap input field
  • Dynamic Components with Slots
  • What does "Fatal error: Unexpectedly found nil while…
  • Why is it common to put CSRF prevention tokens in cookies?
  • Use Wrapbootstrap theme with Aurelia
  • regex match any single character (one character only)
  • What is your most productive shortcut with Vim?
  • jQuery slide left and show
  • XMLHttpRequest cannot load ✘✘✘ No…
  • Ember link-to throws error / does not clear screen…
  • How can you force the UI to update in the middle of…
  • Change image and add class for active menu/button
  • image preview from thumbnail on click and with…
  • How to switch languages with the i18next plugin?
  • render function or template not defined in…
  • jQuery find element by data attribute value
  • Cypress, page content and variables
  • How to keep link hover animation after clicking?
  • Apply attribute-sets on existing elements
  • Reloading iron-ajax when a page is routed to

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Safely turning a JSON string into an object

Next Post:

How to output MySQL query results in CSV format?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error