Jquery Selectors for name prefixes in division - javascript

In my HTML code I have buttons 1, 2, 3 and 4 for 4 different views. I have some divs named as:
sheet(button id)+some string
So whenever I click on button 2 suppose, I want all the divisions with id=sheet2abc, id=sheet2xyz, etc to become visible and for the rest (i.e. 1, 3 and 4) the dispaly:none property should be set like for sheet1abc, sheet3abc, etc.
How can I do this via jQuery selectors?

KISS. Essentially:
$('[id^=sheet]').hide();
$('[id^=sheet'+num+']').show(); // num is a relevant value, see the example
Working example: http://jsfiddle.net/j4TzA/

I think you want to use wildcards in jQuery selectors.
This shows every div whose id starts with "sheet1":
$('div[id^=sheet1]').each(function() {
$(this).show();
});
And this hides the others:
$('div[id^=sheet]:not([id^=sheet1])').each(function() {
$(this).hide();
});
I created a fiddle to demonstrate that.

Buttons: button 1 and so on
Sheets: <div id="sheet1" class="sheet">sheet 1</div> and so on
jQuery:
$('.button').click(function(event){
event.preventDefault();
$('.sheet').hide();
$('#sheet'+$(this).attr('href')).show();
}
Next time make your question more clear.

You can filter like:
$('button').click(function() {
var $button = $(this);
$('div[id^=sheet]').each(function() {
if((new RegExp("^sheet" + $button.data('id') + ".*$")).test($(this).attr('id'))) {
$(this).show();
} else {
$(this).hide();
}
});
});
Then code buttons like:
<button data-id="1">1</button>

Related

jquery function on same classes

I have a page where I have a table with a class. This table sometimes occurs multiple times on the page. I need to do the same jquery function on each instance. How do I achieve that with jquery...???
Here is my jquery:
jQuery(window).load(function () {
if(jQuery('.ezfc-summary-table tr:eq(2) td:eq(1)').text()=='1 layer'){
jQuery('.ezfc-summary-table tr:eq(5)').hide();
jQuery('.ezfc-summary-table tr:eq(6)').hide();
jQuery('.ezfc-summary-table tr:eq(8)').hide();
}
});
#devlin carnate - i'm trying to do another thing, which is to take the text from one of the td's and append it to another class (product-title), which also appears multiple times. Here is what i have tried, but it only takes the text from the first td it finds, and appends it to all the following classes.
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
var getpartname = $('.ezfc-summary-table tr:eq(0) td:eq(1)').text();
$('.product-title').append('<span style="padding-left: 5px;">'+getpartname+'</span>');
}
});
});
Could you help me solve this problem also...???
Thanks in advance
You can iterate over the class assigned to the tables using jQuery $.each() and hide the rows based on whether the '1 layer' text condition is met:
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
}
});
});
Here is a Fiddle Demo : https://jsfiddle.net/zephyr_hex/f45umhkp/2/

Javascript Jquery ScrollTop paired elements

Hello I am new to programming so please excuse my ignorance.
I have several elements that when clicked use the ScrollTop jQuery function to scroll to a specified point (in another bootstrap nav-tab). I have about 20 different elements that when clicked do this. I have resorted to writing 20 different functions that look similar to the one below. I'm sure there must be a way to store these pairs and have a single ScrollTop function that calls upon those pairs.
$('#element').click(function(e) {
e.preventDefault();
var target = $('#element2').closest('.tab-pane').attr('id');
showTab(target);
setTimeout(function() {
$('html, body, nav').animate({
scrollTop: $("#element2").offset().top -100
}, 500);
}, 500);
});
So my js file has twenty or so of this function, where "#element" and "#element2" are subbed with "#alpha" "#alpha2", "#beta" "#beta2", etc...
Should I be using an array? a class? Thanks for you time.
See Working Fiddle Here
Yes you can add same class to all element that you want fire click on them, to reduce code see HTML example :
<span class="scrollTop" id="element">element text</span>
<span class="scrollTop" id="alpha">alpha text</span>
<span class="scrollTop" id="beta">beta text</span>
Adding two lignes to javascript code:
JS :
var id = $(this).attr('id'); //Id of clicked item
var scrollToId = '#'+id+"2"; //Id of scrolled to item
After that replace static ids by dynamic ones (scrollToId, id).
FULL JS :
$('.scrollTop').click(function(e) {
e.preventDefault();
var id = $(this).attr('id'); //Id of clicked item
var scrollToId = '#'+id+"2"; //Id of scrolled to item
var target = $(scrollToId).closest('.tab-pane').attr('id');
showTab(target);
setTimeout(function() {
$('html, body, nav').animate({
scrollTop: $(scrollToId).offset().top -100
}, 500);
});
});
Try adding the class "element" to each of the items that have an element id followed by a number - no need to remove the id at this time.
Then, change the selector in your code to be:
$('.element').click(function(e) {
If you use the class name instead of the id, you'll get notified when any item with a class of "element" is clicked.
If you need to make special allowances based on which one it is - in your single function, you could then check which one you're dealing with by checking its id:
$(this).attr('id')
Good Luck!

Selecting 4 images from the list

I want to create a list of hundred image boxes (50x50 px), and I wanna be able to choose four of them. To check the fifth one, I'd have to uncheck one of the previous ones.
I have found jQuery UI selectable component to do this, I could be able to use ajax to dynamically save information to the database (everything has to be stored in the database here).
The problem is that I couldn't find options to limit selection to 4, and I couldn't find the option to select elements by default after the page is loaded.
How can I do what I want to?
Right now I only have jQuery code:
$("#selectable").selectable();
An SQL choosing images and simple for loop generating those boxes.
Thanks!
This will limit to the first 4 selections using jQueryUI selectable
function clearOverlimitSelections(evt, ui) {
var selectableClasses = {
selectableselecting: 'ui-selecting',
selectableselected: 'ui-selected'
},
selectableClassName = selectableClasses[evt.type];
var $selection = $(this).find('.' + selectableClassName);
if ($selection.length >= 4) {
$selection.filter(':gt(3)').removeClass(selectableClassName)
}
}
$("#selectable").selectable({
selecting: clearOverlimitSelections,
selected: clearOverlimitSelections
});
DEMO
Suppose you have this:
<img class="select-4" ...>
<img class="select-4" ...>
...
<img class="select-4" ...>
The following jQuery code should select a maximum of 4 images:
$('img.select-4').on('click', function(){
var iAmSelected = $(this).hasClass('selected');
if (iAmSelected) {
$(this).removeClass('selected');
} else {
var canAddSelection = $('img.select-4').length < 4;
if (canAddSelection) {
$(this).addClass('selected');
}
}
});
Then, you can use the selected class to style your selected images as you like. The same technique can be used with <input type="checkbox"> elements.

How to toggle checkbox selection rather than only selecting?

I currently am using this JavaScript code snippet to select 3 checkboxes at a time
$(document).ready(function() {
var $cbs = $('input:checkbox[name="select[]"]'),
$links = $('a[name="check"]');
$links.click(function() {
var start = $links.index(this) * 3,
end = start + 3;
$cbs.slice(start,end).prop("checked",true);
});
});
Currently this code only selects the checkboxes, however I was wondering if anyone knew how to modify it so that it toggles the checkbox selection on and off?
Here's an example of my current code: "jsfiddle" - click the 1-3, 4-6 links etc to check the checkboxes.
Make the second argument to the prop("checked", ...) call depend on the "checked" status of the first (or other) checkbox in the slice:
// ...
$cbs.slice(start,end).prop("checked", !$cbs.slice(start).prop("checked"));
Here's an updated jsFiddle.
[Edit] Or to update each checkbox in the slice individually:
// ...
$cbs.slice(start,end).each(function() {
var $this = $(this);
$this.prop("checked", !$this.prop("checked"));
});
http://jsfiddle.net/ShZNF/3/
$cbs.slice(start,end).each(function() {
if ($(this).is(":checked")) {
$(this).removeProp("checked");
} else {
$(this).prop("checked",true);
}
});
http://jsfiddle.net/ShZNF/1/
Edit: Maeric's solution is better. I wasn't aware removeProp had this gotcha:
Note: Do not use this method to remove native properties such as
checked, disabled, or selected. This will remove the property
completely and, once removed, cannot be added again to element. Use
.prop() to set these properties to false instead.

How do I pass data from a link to a jQuery function?

$(function(){
$('.tab2').live('click', function() {
$('#coverTextH3').text(data[1].H3)
$('#coverTextP').text(data[1].P)
});
});
Lets say I have a link How do I pass data, the index of an array, to a jQuery function so I do not have to repeat my code, for each index [0]-[7]?
var data = [
{
H3: 'name',
p: 'more'
},
{
H3: 'string',
p: 'more strings'
}]
There are numerous options. If attaching handlers via javascript, I would select basing on element's id or some custom attribute, not the class. So say you have a number of links like this:
Tab 1
Tab 2
Tab 3
javascript in this case would be
$(function(){
$('a[link-number]').live('click', function() {
var index = $(this).attr('link-number') * 1 - 1;
$('#coverTextH3').text(data[index].H3)
$('#coverTextP').text(data[index].P)
});
});
Alternatively, you can attach click handlers right in your a elements declaration:
Tab 1
Tab 1
Tab 1
and define setCover function like this:
function setCover(index) {
$('#coverTextH3').text(data[index].H3)
$('#coverTextP').text(data[index].P)
}
Each of alternatives require changes in your htlm. If for some reason it is not possible, you need to at least now the range of your tabs, which can be quite tricky.
Something similar to this should work:
markup:
<a href="www.link.com" data-index="1" id="link1" />
javascript:
$(function(){
$('#link1').live('click', function() {
var idx = $(this).data('index');
$('#coverTextH3').text(data[idx].H3)
$('#coverTextP').text(data[idx].P)
});
});
if your link IDs correspond to the index order in the array you can do something like this:
example jsfiddle
jQuery:
$(function() {
$('.tab2').live('click', function(e) {
e.preventDefault();
// parse the integer from the ID
// and get the 0-based index (by subtracting 1)
var idx = $(this).attr('id').replace('link', '') * 1 - 1;
$('#coverTextH3').text(data[idx].H3)
$('#coverTextP').text(data[idx].p)
});
});
HTML:
Link 1
Link 2
<h3 id="coverTextH3"></h3>
<p id="coverTextP"></p>
Text
I'm not sure I understand exactly what you're asking. If this doens't fit, please clarify.

Categories