Jquery:How to use variable as a selector - javascript

I trying to figure out how can I use a variable inside a selector. If I use the actual value of the ID in the selector, it works very well.
$(document).on("click",'.tag', function(){
var data-id = $(this).attr('data-id');
if($('div[data-id="540"]').hasClass("tag_current")) {
$('div[data-id="540"]').removeClass("tag_current").addClass("tag");
}
$(this).toggleClass('tag tag_current');
});
I checked many answers and try it in different ways, but I still didn't solve it.

Basic string concatenation:
$('div[data-id=' + data-id + ']')

Related

get checkbox name from javascript

I am trying to get a checkbox name when a checkbox is clicked...i am using a javascript function but it returns undefined.
Here is the code:
notType= document.getElementById($('[type="checkbox"]').attr('id')).value;
alert(notType);
In your code example, you are retrieving the value of the field, rather than the name. Instead, you should use:
var notType = document.getElementById(id).name;
you can do it like this:
$('input[type="checkbox"]').on('click', function(event){
alert(event.target.id);
});
This should work. $("#" + id) finds the element with the specified id. After that, you get the attribute called "name".
var notType = $("#" + id).attr("name");

Trying to replace a html attribute using a click function

I'm trying to take an a element and take the information from the data-id attribute and store it into a variable. I want to then splice this variable so I get the part that I need and implement it into another variable with some text. From that I then want to replace the src attribute of an iframe with the variable. Unfortunately, this doesn't seem to be working at all and I can't find the issue.
Here is the code:
$('.watchvideo').click(function(){
var idu = $(this).attr('data-id');
var id = "//www.youtube.com/embed/"idu.substr(27,37);
$('.videofeatem').setAttribute("src", id);
});
You have 2 issues in code:
1) concatenating substring
2) setting attribute via jquery
var id = "//www.youtube.com/embed/"+idu.substr(27,37);
$('.videofeatem').attr("src", id);
Without seeing the HTML, it's tough to be sure, but a + fixes the obvious problem:
$('.watchvideo').click(function(){
var idu = $(this).data('id');
var id = "//www.youtube.com/embed/" + idu.substr(27,37);
$('.videofeatem').attr("src", id);
});
Also, note that data-xxx attributes can be read by jQuery as .data('xxx')
Simply.
var id = "//www.youtube.com/embed/" + idu.substr(27,37);
Since you're using jQuery, use the .attr() method instead of the .setAttribute().

Pass ID of an element to jquery function

I want to fetch the id of an element and pass it in jquery function -
$('#fetchedID').fadeOut;
Till now I have tried -
1. $("#$('.delete_status').attr('id')").fadeOut(400);
2. var e = $('.delete_status').attr('id');
$(e).fadeOut(400);
I am sure I am stuck because of the wrong syntax of passing javascript variable in jQuery function. Please help.
Try with concating the Id that you have got with the Id selector(#) like
var e = $('.delete_status').attr('id');
$("#" + e).fadeOut(400);
You have to concatenate the selector, like this:
$("#" + $('.delete_status').prop('id')).fadeOut(400);
If you're going to be using the ID more than once, it is a good idea to cache it:
var delete_status_id = $('.delete_status').prop('id');
$("#" + delete_status_id ).fadeOut(400);
// do something else with delete_status_id...
$("#" + $('.delete_status').attr('id')).fadeOut(400);
Do you really need to pick the ID to then reselect the element and do the fade? If you want to pick only the first occurence of your class, you can use :eq(0) instead.
$('.delete_status:eq(0)').fadeOut(400);

How to get whats inside a variable ID or Class

Say I have this:
var name = $('#contactName');
Is there a way to get just the contactName out of that variable?
Edit: The variable is already set and the value of it is $('#contactName').
What I want to do is retrieve the text from that variable, not create multiple variables. I could easily duplicate variables and just do var nameID = 'contactName' but I am hoping theres an alternative.
You can use the selector property:
var name = $('#contactName');
alert(name.selector); // alerts #contactName
However, you'd have to strip the #, so something like:
s.selector.replace('#','')
Obviously, this would only work for ID-based or tag-based selectors. Class-based selectors would need the . removing.
Try
var name = $('#contactName').attr('id');
All jQuery objects have a selector property that will return the selector they were created with, so your name object would return #contactName. You could then strip off the hash sign.
The title and body of your question seem at odds.
To answer the title:
If the jQuery object was created with a selector, then name.selector should do the trick.
To answer the body:
name.attr('id')
Don't you just use
var name= $("#contactName").val()
??

javascript regular expression

I want to rename the id attribute of an element using jQuery. I need to match the following:
row_1
row_2
row_xx etc
this is what i have so far:
$('.form .newsCategories .row .itemWrap .itemTop .inputBtn').each(function(index){
$(this).attr("id", $(this).attr("id").replace($(this).attr("id").match(/\[row_[0-9]+\]/), "roww_"+index));
});
but this fails. my reg ex is faulty i think. please help
thanks
If I'm understanding the resulting IDs you want, you can just do this:
this.id = "row" + index;
E.g., if you want to find all of them and renumber them in document order:
$("*[id^=row]").each(function(index) {
this.id = "row" + index;
});
That uses an attribute starts-with selector (^=) to find only elements whose id starts with "row", and then renumbers them in document order.
Off-topic: Note that there's no reason at all to use $(this).attr("id"); the DOM element itself has an id property which reflects the id attribute directly.
You have an extra set of square ([ ]) brackets. Change it to:
/row_[0-9]+/
or equivalent:
/row_\d+/
Using the []s creates a character class which you do not need to do. Try this regex...
/row_[0-9]+/

Categories

Resources