Pass ID of an element to jquery function - javascript

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

Related

jquery choose every element from array

I don't know how to achieve it and I been looking for ways to do this for hours without any success.
Let's say I have this code:
var vara="bing.com";
var varb="google.com";
jQuery('a[href^="http://'+vara+'"],a[href^="https://'+vara+'"]').click(function() {alert('y'); });
jQuery('a[href^="http://'+varb+'"],a[href^="https://'+varb+'"]').click(function() {alert('y'); });
And what I need to achieve here is to use one call that sets up the .click functions for each array variable:
var varall=["bing.com","google.com"];
jQuery('a[href^="http://'+varall+'"],a[href^="https://'+varall+'"]').click(function() {alert('y'); });
But this doesn't work. How to make variable "varall" take every element from array, so the second script would work as the first one?
Evan Trimboli's answer is OK but... In this case this selector sintaxis is not very good. Because, as I know, when jQuery will add event to <a> it will split a string and loop every element (again). So we get double looping.
I think the best option is to do something like this:
var varall=["bing.com","google.com"];
varall.forEach(function(item, i, arr) {
$(document).on('click', 'a[href^="http://' + item + '"], a[href^="https://' + item + '"]', function() {
alert('y');
});
});
https://jsfiddle.net/Lfjy2Lxu/
It looks like you're looking to do this
var varall=["bing.com","google.com"];
$.each(varall, function(index, value){
jQuery('a[href^="http://'+value+'"],a[href^="https://'+value+'"]').click(function() {alert('y'); });
});

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().

Jquery:How to use variable as a selector

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 + ']')

More elegant/efficient way to get the 6 consecutive previous DOM elements in a row?

Assuming I have a JQuery object stored in $e obtained through this selector:
var $e = $("input[type='text'][value='" + v + "']");
v represents the $(this).val() which I obtain inside an .each() iteration but it doesn't actually matter, it can be any numeric value.
I want to create a JQuery set of elements containing $e, the DOM element which comes after it, and the 6 DOM elements previous to $e.
The function itself works perfectly fine, I'm using this code for each iteration:
var $e = $("input[type='text'][value='" + v + "']");
$e = $e.add($e.next());
for (i=0;i<6;i++)
$e = $e.add($e.prev());
$e.remove();
I guess it's a little bit hard to explain, so take a look at this JSFiddle.
I've wrapped the code above inside an anonymous function bound to the the Remove line 2 button which will pass a fixed v value to my script.
I'm a starter with JQuery and even after taking a good read at JQuery Selectors page I couldn't find a simpler way to do this. I thought that the .siblings(), or more specifically JQuery('prev ~ siblings') could do it in a simpler way if I could specify the range of the jquery objects array but I couldn't figure out how.
The HTML is generated through a PHP template which I'd rather avoid editing, so I'll accept answers which do not include wrapping the given elements inside a container/wrapper.
Is there any simpler way to select the 6 previous elements of a given JQuery selector without wrapping them inside any container or wrapper?
Try using .prevAll and slice the elements you need. See below,
DEMO
var $prevAll = $e.prevAll();
$e = $e.add($e.next()).add($prevAll.slice(0, 6));
Edit: Added $e.add($e.next()) to add next element.
You could use siblings() and slice():
var $e = $("input:text[value='" + v + "']");
$e.add( $e.siblings().slice(0, 5) ).add( $e.prev() );
I don't know that it's any better, but it's another option:
var $siblings = $e.siblings().andSelf();
var index = $siblings.index($e);
$siblings.slice(index-6,index+2).remove();
http://jsfiddle.net/Lf3xm/5/

Categories

Resources