Jquery Attribute Selector Variable

jQuery attribute selector variable

Prior to jQuery 1.7

The following will work:

$('.tabContent img[value='+selectboxvalue+']').css({border: '1px solid #c10000'});

jQuery 1.7 and later

In 1.7 jQuery changed the syntax to require the attributes to have quotation around the value:

$('.tabContent img[value="'+selectboxvalue+'"]').css({border: '1px solid #c10000'});

Using a variable for value inside jQuery attribute-equals-value selector

Like this:

$('div[foldername="' + g.currentGallery.replace(/"/g, '\\"') + '"]').attr(/* whatever */);

Example if we have:

var g = { currentGallery: 'shoes["1"]' };

Then the selector expression becomes:

div[foldername="shoes[\"1\"]"]

Finding element(s) by data attribute = variable using jQuery

You're just missing string concatenation:

var yearIn = "2014";
$('i[data-year=' + yearIn + ']').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^^^^^^^^^^^^^^

Or in ES2015+ you could use a template literal with a substitution token:

  var yearIn = "2014";
  $(`i[data-year=${yearIn}]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked');
//  ^------------^^^^^^^^^-^

---

FWIW, I always use quotes around the value in the selector when it comes from a variable, just in case the variable ends up with something in it with spaces, etc.:

var yearIn = "2014";
$('i[data-year="' + yearIn + '"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^--------------^

or

var yearIn = "2014";
$(`i[data-year="${yearIn}"]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^---------^

Pass variable into jQuery attribute-contains selector

you just need a space after id:

$(function() {
    var testString = "vp-485858383";
  $('[data-vp*="id: ' +  testString + '"]').css('color', 'red');
});

Demo

$(function() { var testString = "vp-485858383";  $('[data-vp*="id: ' +  testString + '"]').css('color', 'red');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div data-vp='{      id: vp-485858383,      customTwo: "test"}'>asdf</div>

How to target element with data attribute as a variable?

You need to concatenate the variable together with the string selector, try this:

$('a[data-filter-value="' + attribu + '"]').css("background", "#ddd");

Alternatively you could avoid the concatenation and use filter():

$('a').filter(function() {
    return $(this).data('filter-value') == attribu;
}).css("background", "#ddd");

How to use JavaScript variables in jQuery selectors?

var name = this.name;
$("input[name=" + name + "]").hide();

OR you can do something like this.

var id = this.id;
$('#' + id).hide();

OR you can give some effect also.

$("#" + this.id).slideUp();

If you want to remove the entire element permanently form the page.

$("#" + this.id).remove();

You can also use it in this also.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

jquery attribute selector variable that contains a quote?

You can escape the special characters in your variable prior to using it in your attribute selector.

You can use the following regex:

var sel = "[id='" + theID.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1') + "']"

DEMO

How to select an element with attribute based on variable selector which is defined earlier?

You can make use of filter to get the matching id label from $label and then set the text value. see below code

  var $label = $('label');

  var id = $(this).find('.form-control-data-id').text();
  var val = $(this).find('.form-control').val();
  $label.filter(function(){
    return id == $(this).data('id');
  }).text(val);

JSFiddle Demo

---

Related Topics