I was wondering how to use jQuery's :gt() in an inclusive way. I am trying to show/hide table rows dynamically.
$('#' + tbodyId + ' > tr:gt(' + newRowStart + '):lt(' + rowsToShow + ')').show();
If i try to show the first 5 rows say, newRowStart = 0 and rowsToShow = 5. This will not show the first row. Setting it to -1 doesn't work either. It would be very helpful if there was an inclusive method like :gt(). Does anyone know how to do this?
I would just use .slice [docs]:
$('#' + tbodyId + ' > tr').slice(newRowStart, newRowStart + rowsToShow).show();
// or if rowsToShow is an index actually:
$('#' + tbodyId + ' > tr').slice(newRowStart, rowsToShow).show();
It's also a bit easier to read.
It would be very helpful if there was an inclusive method like :gt()
Not that I know of. If you want to include all elements from a given index on, you either have to use :gt(index-1) or omit :gt completely if the index is 0.
One option is to use slice():
$('#'+tbodyId)
.find('tr')
.slice( newRowStart, newRowStart + rowsToShow ) // inclusive of starting point
.show();
Related
Here is the current app: JSFiddle
It currently spits out 31 semi-random but not duplicate entries like this:
meal1= undefined,
Plain Pizza,
Hard-boiled egg,
Gluten-free cookie,
meal2= undefined,
Fried Beefcake,
Hard-boiled egg,
Graham Crackers,
meal3= undefined,
Lasagna,
Tater tots,
Sundae,
**See where it says "Undefined"? I'm trying to add a sort of day[i] counter to it, which requires (I think) appending another datatype to the container div.
I'm having a lot of trouble adding an additional variable that plays by these rules.
What I've tried:
Nesting a for loop that would increment the day per entry, and append that as a new div at the bottom of the script:
var i = 1;
var day = [];
for (i = 1; i < 32; i++) {
return day[i] (I don't know...)
}
This doesn't work and breaks the code every time. Since I am learning, can you provide a few types of syntax I could experiment with to solve this? If you want to just fix it, that's fine, too. I just want to learn why some of this stuff works.
At the bottom of the Javascript code we have:
for (var key in meals){
container = $('<div id="mealsDiv" class="container"></div>');
wrapper.append(container);
//This is where I want to add an extra div class that shows the date (1-31).
//I want to append day[i] to the meal and just number them, 1-31.
//I tried doing the following but it just breaks everything.
container.append('<div class="date">' + day[i] +'</div>');
container.append('<div class="main">' + meals[key].main +'</div>');
container.append('<div class="side">' + meals[key].side +'</div>');
container.append('<div class="dessert">' + meals[key].dessert +'</div>');
}
You're getting the undefined because day is a number not an array and you're trying to do day[i]
var day = 1;
console.log(x[1]); // undefined
You can simply use the key which is the index of the meal like :
container.append('<div class="date">' + (+key + 1) +'</div>');
the +key is to to cast it to an int and + 1 is because the array index starts from 0
instead of
container.append('<div class="date">' + day[i] +'</div>');
here's your updated fiddle
I have a super simple fiddle... but when I do an inspect element, $("#cart table") and frankly $("#add"), $("#remove"), $("#cart") all return null even though these items are on the page... what am I doing wrong?
(Consequently what's breaking is my line $("#cart table").find("tr").length())
https://jsfiddle.net/qb3a6j31/
Basically, length is a property, not a function,
$("#cart table").find("tr").length
DEMO
Your full code would be,
$(document).on("click", "#add", function(e) {
e.preventDefault();
var next_item_number = parseInt($("#cart table").find("tr").length) + 1
var item =
'<tr>' +
'<td>Item #' + next_item_number + '</td>' +
'</tr>'
$("#cart table").append(item)
});
1) You're not loading jQuery in your jsFiddle
2) This won't work
$("#cart table").find("tr").length()
...because there are no table rows available when you initially click the add button.
3) When you do have rows, it's .length.
I would be inclined to write it like this. It gets the rows, and if there are some uses length, otherwise 1.
var $rows = $("#cart table").find("tr");
var next_item_number = parseInt($rows.length || 1, 10);
DEMO
You have used length as a function but it is a property. Use length instead of length()
$("#cart table").find("tr").length
UPDATED FIDDLE
Uncaught TypeError: $(...).find(...).length is not a function
length is a numeric property, not a function. Replace your code with this:
parseInt($("#cart table").find("tr").length)
And it will work. Note: You may want to add an explicit 10 radix parameter to parseInt.
The aim is to append a line of text into the element below.
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPT oneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
this code is contained within a loop so each time a new anchor is created and given an incremented ID (countwide) for for example 'anchor1' 'anchor2'
What I need is to be able to append this variable below as part of the p element inside this anchor
image_price
I have tried this with no progress.
$("#anchor1").append(image_price);
obviously we need the id in the line above to increment in line with the loop.
Thanks.
Try:
$("#anchor" + countWide + " .popupDynamic").append(image_price);
Explanation:
I have just updated the selector so that it would pick up the child of the #anchor + countWide(this means anchor plus the dynamic ID) with the class of .popupDynamic and append the price to it.
You can use the countWide variable in your selector, this way :
$("#anchor"+countWide+" .popupDynamic").append(image_price);
I had asked a question about How to open option list of HTML select tag on onfocus(). At that time it solved my problem but I missed one problem that every time on opening a html select option onfocus next select option went disappear.
I not able to find whats going wrong with this code.
here is link for that problematic question jsFiddle.
Yes, that's what the lines
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo(50,0);
do. They hide the next select, because otherwise it would show on top of the expanded one.
This isn't a good solution at all though. Instead i'd use z-index to prevent that from happening:
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto")).css('z-index',2);
});
$('select').blur(function(){
$(this).attr("size",1).css('z-index','1');
});
$('select').change(function(){
$(this).attr("size",1).css('z-index','1');
});
It would be even better to use a class instead of inline style. But i used that just as a demonstration.
http://jsfiddle.net/PpTeF/1/
Just comment out the fadeTo function. check this http://jsfiddle.net/PpTeF/2/
$(document).ready(function(){
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto"));
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo(50,0);
});
$('select').blur(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
$('select').change(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
});
Cheers!!
I have a descriptions for each layer of a map , being generated via JSON objects. I generate all html for these containers, which contains maps , legends, and descriptions.
html_description += '<div ' + hide + ' id="'+ map_div_id + '_description_' + id + '">' + layer_info.description + '</div>';
// Set the description from the layer info
$('#' + map_div_id + '_description').html(html_description);
Then I want to only show certain descrptions (depending on which layer is showing). So below should work , (as it works in my console debugger) .
// Hide Descriptions
$('#' + map_div_id + '_description div').hide();
$('#' + map_div_id + '_description_' + visible).show();
// Show Proper Description
console.log('#' + map_div_id + '_description_' + visible);
console.log($('#' + map_div_id + '_description_' + visible));
Also the odd thing is I can manipulate the heading contanier :
// THIS WORKS?!
$('#' + map_div_id + '_description').hide();
Any ideas?
http://jsfiddle.net/PazSs/2/
Thanks for the jsFiddle.
I modified it to investigate, and here's my copy:
http://jsfiddle.net/PazSs/8/
I do believe your problem is in your dynamic_layer array. I stepped through the code in jsFiddle and that array has zero elements.
The result is when you call
dynamic_layer[map_div_id].setVisibleLayers(layer_id);
It crashes, as you're dereferencing an undefined result (null).
I see you're populating the dynamic_layer further above:
if (typeof geo_server != 'undefined' && geo_server != null) {
gp_server = gis_server + '/' + geo_server;
gp = new esri.tasks.Geoprocessor(gp_server);
} else {
// Adds a dynamic layer
dynamic_layer[map_div_id] = new esri.layers.ArcGISDynamicMapServiceLayer(full_map_server);
map[map_div_id].addLayers([dynamic_layer[map_div_id]]);
}
This seems to be the only place you stuff objects into the dynamic_layer array, so I'd start there. Check out your logic and ensure that you always put the layer in when required.
Let me know if it works!
that selector:
$('#' + map_div_id + '_description div')
would look for a div inside your description div.
assumed the value of 'map_div_id' is 'test' your markup after insert should look like this:
<div id="test_description">
<div> ...your description here </div>
</div>
when i see how your build your html_descriptions string, it does not look like it is doing that... (it only would be like that if 'layer_info.description' would contain '...'
thats a lot of assuming, it's probably easier you show us some generated markup, and complete script. use jsfiddle
I can see your logic:
HIDE ALL layer descriptions
and then SHOW only the layers you want to see
What does "visible" mean? Is that an id? The name implies a boolean.
If it's a boolean, your selector
$('#' + map_div_id + '_description_' + visible).show();
doesn't look like it'll work properly.
Can you describe what visible is a bit more, please, and give examples of the actual markup?
Thanks.