I want to be able to hide list items that have less than 3 characters, how do I do this? What is wrong with my code below?
I am a JavaScript/jQuery newbie.
jQuery().ready(function () {
if (jQuery('ol li').length < 3) {
jQuery(this).hide();
};
});
Your code is saying
if (jQuery('ol li').length < 3) { //If I have less than 3 li elements
jQuery(this).hide(); //hide the window object
};
What you want to use is filter
$('ol li').filter( function(){ return $(this).text().length<3; } ).hide();
EDIT - Based on your comment in my post: If it is a span tag that could have other data around it:
$('ol li span').filter( function(){ return $(this).text().length<3; } ).parent().hide()
Fiddle running the span example
You'll need to filter out the elements that have a content of less than 3 characters, and hide those :
$(function() {
$('ol li').filter(function() {
return $(this).text().length < 3 ;
}).hide();
});
$('ul li').each(function() {
if ($(this).text().length < 3)
$(this).hide();
});
Demo
Try this:
$('ol li').filter(function(){ return $(this).text().length < 3; }).hide();
Another alternative could be this:
(Because you are evaluating elements not value characters in your question code snippet)
if($('ol li').length < 3){ $(this).hide(); };
I think you need to get the .html() of your DOM element and then do .length on that.
Related
This question already has answers here:
jQuery or CSS selector to select all IDs that start with some string [duplicate]
(4 answers)
Closed 7 years ago.
I have a column of 10 checkboxes, with an additional checkbox at the top titled "Select All". Each checkbox has a sequential id, like "cbox1", "cbox2", etc. When each of these cboxes are clicked, they make an image become visible which resides within a div next to that checkbox. This div is called "tinybox" and it has an id which is sequential and matches it's respective cbox. So the 4th checkbox has an id of cbox4 and upon clicking, it opens tinybox4.
I'm trying to use jQuery, so that when you click the "Select All" checkbox, it loops through each of the cboxes and uses .show() or .hide() on all the tinybox variants.
The following jQuery runs when a user clicks "Select All" checkbox, and currently only either shows or hides #tinypic1. Instead of just tinypic1, it should loop(?) through tinypic1,2,3,4,... so how do I adapt this code to iterate through tinybox(n) where (n) represents an increasing integer from 1-10:
<script type="text/javascript">
$(document).ready(function() {
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
$("#tinypic1").show();
$('.cboxes').each(function() {
this.checked = true;
});
} else {
$("#tinypic1").hide();
$('.cboxes').each(function() {
this.checked = false;
});
}
});
});
</script>
Hopefully I'm being clear. I'm trying to verbalize my concept of the solution as best as possible. Thanks for your time
There are 2 ways you can go about this that are quick.
you can add a loop to your script like the following:
Here is a fiddle of this way Fiddle
$('#selectall').click(function() {
if ($('#selectall').prop('checked')) {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).show();
$("#cbox" + i).prop("checked", true);
}
} else {
for ( i = 1; i <= 10; i++ ) {
$("#tinypic" + i).hide();
$("#cbox" + i).prop("checked", false);
}
}
});
You can just do a begins with on the id like so: here is a fiddle of this way fiddle
if ($('#selectall').prop('checked')) {
$("[id^='tinypic']").show();
$("[id^='cbox']").prop("checked", true);
} else {
$("[id^='tinypic']").hide();
$("[id^='cbox']").prop("checked", false);
}
$('#selectall').toggle(
function() {
$('.cboxes').each(function(){
$(this).prop('checked', true);
$(this).next().show();
});
},
function() {
$('.cboxes').each(function(){
$(this).prop('checked', false);
$(this).next().hide();
});
}
);
You can select everything that starts with a string in your selector:
function toggleAll(state) {
if (state===true) {
$( "[id^='tinyPic']" ).show();
$( "[id^='cbox']" ).prop('checked', true);
} else {
$( "[id^='tinyPic']" ).hide();
$( "[id^='cbox']" ).prop('checked', false);
}
}
enter code hereMove your line of code $('#tinypic1').show() to the each block and change it to
this.next().show();
And the same idea for the hide part
So i have a div which when i click expands, and i want that its paragraph show when it expands, i tried this in jquery
$(document).ready(function(){
$('div').on('click', function () {
if ($(this).height() < 450){
$(this).$('p').show();
$(this).addClass('expanded');
}
else {
$(this).removeClass('expanded');
$(this).$('p').hide();
}
});
});
am i doing something wrong getting its paragraph?
sorry for bad english
$(document).ready(function(){
$('div').on('click', function () {
if ($(this).height() < 450){
$(this > 'p').show(); //change made here, assuming p is inside this element
$(this).addClass('expanded');
}
else {
$(this).removeClass('expanded');
$(this > 'p').hide(); //change made here, assuming p is inside this element
}
});
});
It worked with Satpal's code:
$(this).find('p') instead of $(this).$('p')
This is my Jquery at the moment:
$("button").click(function() {
var counter = 1
$("tr td:nth-child(2)").text(counter);
click ++;
});
Instead of using;
$"(tr td:nth-child(2)").text(counter);
I would like to use .slice() in order to avoid having to do this:
$("tr td:nth-child(2)").text(counter);
$("tr td:nth-child(4)").text(counter);
$("tr td:nth-child(6)").text(counter);
$("tr td:nth-child(8)").text(counter);
Alternatively if there is a better solution I would appreciate that too. Thanks.
Try the jQuery :even selector:
$('tr td:even').text(counter);
If you want to start from index 2(and not 0), use:
$('tr td:even:not(:first)').text(counter);
DEMO
Just iterate over the elements.
$("tr td").each(function (index, element) {
if (index % 2 === 0) { // if you want to check for evens
element.text(index);
}
})
I have a cloned element and I want it so if I add a class to one of them it checks for active removes is and adds it to this and translates to the other. Here's what I'm working with:
$(document).ready(function() {
$("li").click(function(){
/*Here I want to add something like var active = $(.clonedelement + this, this)
but that does probably not makes sense, so what should i do? */
var active = $(this)
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
active.addClass("active");
}
});
});
Right now, it removes the current active from both, not does only add class to one.
I made a jsfiddle of it
http://jsfiddle.net/pintu31/8BxuE/
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
Header = $("#headerny", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
Header.addClass("floatingHeader");
} else {
Header.removeClass("floatingHeader");
};
});
}
// DOM Ready
$(function() {
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
If you just need to highlight the clicked element with the class of active, and remove all others then try this:
$("li").click(function(){
$("li").removeClass("active");
$(this).addClass("active");
});
You don't really need to check if either this, or others already have the class, simply steamroller to 'active' class off all the others and add it to the one that's been clicked
try this
demo updated 1
demo updated 2 //with clone(true)
demo updated 3 //with clone(false) - default
demo updated 4
$(document).ready(function() {
$(document).on('click', 'li', function(){
var ind = $(this).index();
$('li').removeClass('active');
$('li').eq(ind).addClass('active');
$('#header1').empty();
$('#header').find('ul').clone(true).appendTo( '#header1' );
});
});
$(document).ready(function() {
$("li").click(function(){
$("li").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
});
I have 2 multi select boxes like as in this link. http://jsfiddle.net/bdMAF/38/
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
But When i add from one first select box to second select box it is working fine for
me.But again when i add from second select box to first select box they are appending to
last of first select box.But what i want is i need to add they must be added in the place
where they deleted.
Thanks in advance...
Maybe you can simply set and remove the attribute "disabled" but it will leave a blank space in the options. Note that with this method you will need to clone the option the first time.
The other solution whould be to add the content as usual but applying a sort() function before
function byValue(a, b) {
return a.value > b.value ? 1 : -1;
};
function rearrangeList(list) {
$(list).find("option").sort(byValue).appendTo(list);
}
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
rearrangeList("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
rearrangeList("#list1");
});
});
});
You can try at this fiddle
You need to keep track of some sort of index, I think in your case you can use the value of each option. (but you could use a dedicated data-* attribute if you need to)
With that value you can then search the current list and see where it should fit in. Loop the options and check for a value greater than the one you are moving. If you find one then insert it before that, if you don't fine one then insert at the end.
This should do it:
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
var item = $(this).remove();
var match = null;
$("#list1").find("option").each(function(){
if($(this).attr("value") > item.attr("value")){
match = $(this);
return false;
}
});
if(match)
item.insertBefore(match);
else
$("#list1").append(item);
});
});
You can apply the same for the reverse too.
Here is a working example
After adding the options back to #list1, a simple sort() will do the rest. For that we need to add a comparison function to it based on its value.
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
var opts = $('#list1 option').get();
$('#list1 ').html(opts.sort(optionSort));
});
});
function optionSort(a, b) {
return $(a).val() > $(b).val();
}
});
Check out this JSFiddle
You can also sort using text() instead of val() by changing it in the optionSort().