Using JavaScript Variables with multiple jQuery selectors - javascript

My question is asked before for using javascript variables with the Single jQuery selector, As in this post below.
How to use javascript variables in jquery selectors
But my question is how to use one variable with two or more selectors?
var itemId = $(this).closest('li').attr('id');
This is for one selector
var contentType = $('#' + itemId + ' .content-type');
But how to use itemId when i have two selectors in one row like below
var contentType = $('.content-type1, .content-type2');

You do it the same way, by adding a , between 2 selectors.
As of, you are doing:
var contentType = $('#' + itemId + ' .content-type');
For 2 elements, you use ,:
var contentType = $('#' + itemId + ' .content-type1, #' + itemId + ' .content-type2');

You can concat manually as much as you need but maybe you can do a selector prepare the following way so you can append n-times the variable easily:
var itemId = $(this).closest('li').attr('id');
var selector = '#{i}.content-type1, #{i}.content-type2, #{i}.content-type3'; // you can extend this as much as you like or even add a loop to construct content types
var finalSelector = selector.split('{i}').join(itemId); // doing the replace
var contentType = $(finalSelector);
Where {i} is just a fictive placeholder string. I think this is a bit more readable. Anyways your question is kinda strange when it comes to the
"or more selectors"
part logically. Maybe you need to change your code flow/implementation technique for whatever you are trying to achieve.

Related

How do I add a row manually in the Jquery array

I have this Jquery code:
var $affectedTRs = $('#location-usergroup-table tr[data-department-id="' + departmentID + '"')
So this contains all trs and I can run functions like find etc.
Now I want to push an item in this $affectedTRs
But this is not working:
$affectedTR.concat($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));
How do I push something manually in this selected object so I can have all Jquery functions like find etc available on it.
You can use jQuery's add() method: https://api.jquery.com/add/
$newSelection = $affectedTR.add($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));
Perhaps you want this:
$("#location-usergroup-table").append("<tr data-domain-id=\"" + domainID + "\""></tr>");
To add a new element to existing container, use .append(). More details here.
Your $affectedTR has all the rows i.e DOM elements. If you wish to create new row in the table, try jquery append

Creating a link tag with parameters

Hi i have a link tag that i am creating from javascript. now i want to append a parameters to that link just like below example.so that when the user clicks that button it should go to that url along with the paramenters
var id="123456789";
var data = ' click' ;
this data tag i am appending to some other element.
now i can able to call /order/product. but when i give id also it is giving error "missing arguments"!!
can anyone please help me?
You'll have to unquote the string where the variable goes
var id = "123456789";
var data = ' click' ;
Or on really up-to-date JavaScript engines that support ES2015+ template literals:
var id = "123456789";
var data = ` click`;
But that won't work on any version of IE (does on Edge).
For easy create link you can use method link(str) of String:
var id="123456789";
var linkText = " click";
var href = "/order/product/" + id;
var data = linkText.link(href);
alert(data);
To make it easier both to write and read (and debug too), I'd recommend the following variant of how to organize the code:
var id = "1234566",
// It is more understandable now that hrefLink contains id concatenated with some other string
hrefLink = "/order/product/" + id,
link = document.createElemen('a');
link.href = hrefLink;
In this way you
See what variable means what
Control what your hrefLink consists of
Follow best practises when instead of multiple lines with var statement you explicitly "show" where the declaration section is:
var a = smth1,
b = smth2;
So just by looking at this code you easier understand that that is a code chunk of variables declaration
You just need to remove the quotes from id
just like below
var id="123456789";
var data = ' click' ;
If You have id within quotes means it will take as string not a variable name and so just remove the quotes. It will work

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

Need to select a drop down list element with a particular attribute value from a list of drop down lists and set its selected value

.FilterList is the class name of all the drop down lists
var $lists = $('.FilterList[ctype="' + ctype + '"]').css('display', 'inline');
Something like the below works fine but I was wondering if there's a more concise and efficient method
I could use instead of the .each()
$lists.each(function () { $(this).attr('filterid') == filterid ? $(this).val(thisval) : null; });
Whilst I am after something more like:
$lists.first('.FilterList[filterid = "' + filterid + '"]').val(thisval);
Your question is a little vague without any HTML to demonstrate what you're trying to grab from the DOM, but from what I gather, it seems like something like this should work:
$lists.find("[filterid='" + filterId + "']").val(myVal);
Honestly, though, I'm just guessing at what it is you are looking for. Try creating a jsFiddle to give us a better idea of what you're after.

Categories

Resources