Would it be possible to add a certain class to a li that contains a certain string of text using JavaScript/jQuery?
UPDATE/NEW QUESTION:
Instead of detecting the content of the li, can I have it add the class if the li has another specified class?
Answering the fellow's extended question:
$('li.yourClass').addClass('anotherClass');
You're asking really basic questions. I'd recommend you just spend some time with the beginner jQuery tutorials on the site and you'll understand all of this stuff much better.
Edit: IGNORE MY OLD ANSWER. You learn something every day. Do this, not what I said:
//http://api.jquery.com/contains-selector/
$('li:contains('+ searchText +')').addClass('myClass');
Old answer:
$('li').each(function(){
var _this = $(this);
if( _this.text() === testString ){
_this.addClass('myClass');
}
});
In the if statement, you can change that to check the .html() of your li or even do a more advanced regex if you need that. But basically, you have to loop through the li's in one form or another to check their content against your testString.
$('li').filter(function () {
return $(this).text().indexOf('certain string') !== -1;
}).addClass('certainClass');
You can use the jQuery filter function.
The filter function can be passed a selector instead of a function:
$('li').filter('.specified-class').addClass('certainClass');
at which point you should probably just update the initial selector:
$('li.specified-class').addClass('certainClass');
Related
I've got an FAQ page I'm building. Next to the question, there is a plus sign to expand the content. On click, I've added the class active, but there are many questions, and I don't want to repeat the same jQuery snippet for each question. I've figured out how to find the parent ID but I'm having trouble storing it in an variable to reuse in the jQuery script.
What I want to be able to do:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$('element .expand').toggleClass('active')
})
Is there a way to do this? I get undefined when I do this:
$('.expand').click(function(){
console.log(element)
});
You can use the find() function to locate children of a selected element:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$("#" + element).find('.expand').toggleClass('active')
});
However, looking at your code, it seems like you just want to toggle the "active" class of the clicked element. If that is the case, you can do this much more simply without a variable at all:
$('.expand').click(function(){
$(this).toggleClass('active')
});
I'm making a game in DOM (javascript + jquery) and I need to switch stages, for that I need to hide all from one stage, and show all of a new one. The showing part is easy cuz I'm creating new stuff. But I'd like a clean way of finding every last single child of a div, all his descendance, cousin, niece I don't care, and hide them. To show that in code something like :
while (child = $(this).hasChildren)
{
child.hide();
}
Instead of something like that :
$(this.id).children().children().children().hide();
$(this.id).children().children().hide();
$(this.id).children().hide()
$(this.id).hide();
The goal is to hide his children, and his children's children, and so on.
I hope I'm not too confusing.
Thanks in advance for the answers!
EDIT: for someone that doesn't want to hide the children, but access them all, and you can't use .find("*") then answer number two might be more adapted for you (the one from Rajan Goswami).
If you want to perform something on all children of an element you can use this syntax:
$('#myDiv *').hide();
or using .find()
$('#myDiv').find('*').hide();
Of course you can use any function, not just .hide()
You can try the following solution:
"myParentControl" is the ID of the parent-most control.
$(document).ready(function(){
HideChildren($(#myParentControl))
})
function HideChildren(cntrl){
if ( $(cntrl).children().length > 0 ) {
$(cntrl).children().each(function(){
HideChildren(this);
$(this).hide();
})
}
}
I am new to jQuery and hope someone here can help me with this:
Basically what I am trying to do is the following:
Check for all elements with the class "limit" and get their maxlength.
Find an element with the class "count" in the same row.
Add the found maxlength to the count element's text.
I am using the following but this displays the last maxlength for all the elements in question. My guess is that my last element is perhaps overwriting the others.
Can someone tell me what I have to change here ?
var limit = '';
$('.limit').each(function() {
limit = $(this).attr('maxlength');
$(this).closest('tr').find($('.count').text(limit));
});
Many thanks in advance, Mike.
Try to use:
$(this).closest('tr').find('.count').text(limit);
You don't need to convert .count to jQuery object inside .find() method. You also need to put .text() outside of .find()
Well, I know that with some jQuery actions, we can add a lot of classes to a particular div:
<div class="cleanstate"></div>
Let's say that with some clicks and other things, the div gets a lot of classes
<div class="cleanstate bgred paddingleft allcaptions ..."></div>
So, how I can remove all the classes except one? The only idea I have come up is with this:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put an ID attribute with the base CSS properties so they don't get deleted, what also improves performance, but i just want to know another solution to get rid of all except ".cleanstate"
I'm asking this because, in the real script, the div suffers various changes of classes.
Instead of doing it in 2 steps, you could just reset the entire value at once with attr by overwriting all of the class values with the class you want:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Sample: http://jsfiddle.net/jtmKK/1/
Use attr to directly set the class attribute to the specific value you want:
$('#container div.cleanstate').attr('class','cleanstate');
With plain old JavaScript, not JQuery:
document.getElementById("container").className = "cleanstate";
Sometimes you need to keep some of the classes due to CSS animation, because as soon as you remove all classes, animation may not work. Instead, you can keep some classes and remove the rest like this:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');
regarding to robs answer and for and for the sake of completeness you can also use querySelector with vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";
What if if you want to keep one or more than one classes and want classes except these. These solution would not work where you don't want to remove all classes add that perticular class again.
Using attr and removeClass() resets all classes in first instance and then attach that perticular class again. If you using some animation on classes which are being reset again, it will fail.
If you want to simply remove all classes except some class then this is for you.
My solution is for: removeAllExceptThese
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
$.fn.removeClassesExceptThese = function(classList) {
/* pass mutliple class name in array like ["first", "second"] */
var $elem = $(this);
if($elem.length > 0) {
var existingClassList = $elem.attr("class").split(' ');
var classListToRemove = existingClassList.diff(classList);
$elem
.removeClass(classListToRemove.join(" "))
.addClass(classList.join(" "));
}
return $elem;
};
This will not reset all classes, it will remove only necessary.
I needed it in my project where I needed to remove only not matching classes.
You can use it $(".third").removeClassesExceptThese(["first", "second"]);
I have following HTML
<div id="finalTree">
<ul>
<li class="last" style="display: list-item;">
<a id="DataSheets" href="#">Data Sheets</a>
</li></u>...........</div>
and I am first hiding all these li and then trying to show those li which match to selector. Here is my JavaScript. Here filterData is id of links.
function filterLeftNavTree(filterData){
jQuery("ul.treeview").find("li").hide();
var selectors =[];
if(filterData.indexOf("|")!=-1){
var filterData = filterData.split("|");
for(i=0;i<filterData.length;i++){
selectors.push('#'+filterData[i]);
}
var filtered = selectors.join(',');
$(filtered ).show();
}else{
$('#'+filterData+).show();
} }
the last two line doesn't works...
any one can tell me what can be possible reason. Actually I tried to show li with :has, :contains, find().filter() but all these are taking too much time if I have large tree.
Do I am trying to show it by using multiple selector, but it's not showing any thing. Any alternative having faster way to show it will be highly appreciated.
What you have (aside from the syntax error #verrerby mentioned) should be working, but why not cut down on that code a bit?
You can slim things down by adding the # on every element after the first as part of the .join(), this also greatly simplifies the logic. You can reduce it down to:
function filterLeftNavTree(filterData) {
$("ul.treeview li").hide();
$('#'+filterData.split('|').join(',#')).show();
}
Also note the change removing .find(), it's faster in browser that support it to use a single selector, and just as fast in all the others.
The only other possible reason I see for your code not working is jQuery is used for the hide and $ is used on the show, is it possible $ refers to something else? (e.g. ptototype?) To test just replace $ with jQuery on the .show() call.
You have an extra +' in the last statement, and you could do it in multiple statements instead of one (the #{id} selector is very fast):
if(filterData.indexOf("|")!=-1){
var filterData = filterData.split("|");
for(i=0;i<filterData.length;i++){
$('#'+filterData[i]).show();
}
}else{
$('#'+filterData).show();
}