.val() as part of the selector - javascript

I have 5 different tables with the ids *table_1,...,table_5* with the class *table_class* and a selection which with the value 1,...,5.
Example:
I wanted that when in the selection the option 4 is selected that all the tables are hidden, except the table with the id table_4. I'm able to hide them aso. But I'm unable to combine the .val() with the name, so that i can get the name table_4 as selector...
$("#tables_"+$(this).val()).show();
Could please someone help me...
Thanks

Put your selecter id instead of this.
$("#tables_"+$('#myselecter').val()).show();

It might not be the safest way to do it, but yes, your code works fine. Demo
$('select').change(function() {
$('table').hide();
$('#table_' + $(this).val()).show();
});

Related

toggleClass works only on td and not whole tr

I am using a datatable whch has a checkbox on each row..
When the checkbox will be clicked, the total will have a class called "selected"
so here is my code which i have put
$("#domains_list").find("input[name=\'chk[]\']").on("click",
function()
{
$(this).closest("tr").toggleClass("selected");
});
But the problem is, instead of getting the whole as class selected, only particular td is getting highlighted.
Here's a screenshot
so, how can i solve this issue, is there any way?
As Zougen pointed out, your JS is correct - that is why the td next to the input is being colored and not the td containing the input itself. The other tds wont get highlighted probably because your CSS is being overwritten.
One thing though: your selector looks a little bit strange:
.find("input[name=\'chk[]\']") here you dont need to escape the single ' since your string delimiters are " anyways, just write:
$('td input[name*="chk"]').change(function() {
$(this).closest('tr').toggleClass("selected");
});
i have achieved the same purpose by following jQuery code, i hope this will solve your problem as wel.
$(function() {
$('td:first-child input').change(function() {
$(this).closest('tr').toggleClass("selected");
});
});

multiple id selector using fliter.js

Now i have two divs with different id (#filter1, #filter2).
I want the selection inside div (.tags) can change the result of (#filter1, #filter2) at the same time.
I have tried to use multiple id selector, but seems cannot work.
$(function(){
$('#filter1, #filter2').filter();
});
additionally, i would like to set while i selected D1, the multiple selection of D2 will be disabled
it can just switch the option from D1 to D2 if i click D2
(as they are in the same catagory)
DEMO
i am a beginner on js, hope can get help from you
many thanks
You can achieve this by using "each()". See following script:
$("#filter1,#filter2").each(function(){
$(this).filter();
});
So to disable using multiple selectors, you can get it by this:
$("#filter1,#filter2").each(function(){
$(this).attr('disabled','disabled');
});
Select the check if it is useful to you ;)

Getting previous element of given in dom model

I have list of elements on my page
input
input
span
input
span
etc
I want to select each input that sits before each span, and after do, whatever i will have to. Is there any available ways to do that?
Use prev() to select the previous input of any given span:
$(this).prev("input");
If you're trying to select all previous inputs of all spans in 1 selector try this:
​$("span").prev("input");
http://jsfiddle.net/6hPRa/1/
$("span").prev("input").css("background-color", "pink");​
You have to use .prev()
ex :
$('span').prev("input") //this is input element
Use .parent() or .parents('.selector').first()
jQuery('.given').parent();
OR without jQuery
var el = document.getElementById('id');
el.parentNode...
AHH, previous-element...
Ok, now you have an answer.
Further there is a method
.siblings()
If you want the prev-prev element do so
jQuery('.given').prev().prev();
It's not that easy to define which one should be the first, I suggest go with set tabindex for each of them, and then with that using that as a selector you can always easily grab the previous one or next one

jQuery: Hide div with no ID

How can I hide a div with no ID? I have an application which creates few stickies. Some of them have no ID and some of the do have. How can I hide the ones with no ID?
The position is not always the same.
This is what I get in the HTML where I want to hide the last one.
Is it possible I can hide the one with no ID? Note that the rest which have ID's, is a number generated randomly.
Thanks alot.
Try this:
$("div.sticky:not([id])").hide();
The main idea is to use :not([id]) selector with element selector.
fiddle: http://jsfiddle.net/57uQ8/
http://sandbox.phpcode.eu/g/d2956/2
<script>
$(function(){
$("div.sticky").each(function(b){
if (!$(this).attr('id')){
$(this).hide();
}
});
});
</script>
will probably do it, assuming you want to show ONLY divs with no IDS and divs with class sticky

Get value of last option of a drop down?

I have dropdown menu..which is dynamic.. How can get value of the last item in that drop down (using jquery is also acceptable)
With jQuery it's super easy:
var lastValue = $('#idOfSelect option:last-child').val();
With plain Javascript it's not much worse:
var theSelect = document.getElementById('idOfSelect');
var lastValue = theSelect.options[theSelect.options.length - 1].value;
With jQuery:
$('select option:last').val()
Of course you should use a proper ID to address the select element.
If you mean "menu" it terms of a list, you can do it similar:
// gives the text inside the last <li> element
$('#menu li:last').text()
// gives you the attribute 'some_attribute' of the last <li> element
$('#menu li:last').attr('some_attribute')
The key here is to use the :last selector.
One more way of doing this
$('select option').last().val()
or for list
$('ul li').last().text()
While above 2 suggestions are perfectly valid, I feel this approach is cleaner than modifying the selector.
Offcourse you should add id/class of specific select/ul if you want to target the particular menu/list.
Using attributte selected.
$('#SelectName option:last-child').attr('selected', 'selected');
$('#id_of_select option:last-of-type').click();
OR
$('#id_of_select option:last-child').click();
Both of these should find and click on the last option on any dynamic drop-down list.

Categories