I want to remove and element from an each() loop inside a plugin so I will only return some specific itens. But so far I made many tests and I still cannot remove the item.
(function($){
$.fn.teste = function(parametro){
var parametro_padrao = {};
if (parametro){$.extend(parametro_padrao, parametro);}
return this.each(function(){
//if certain condition happens I want to remove an element so it will not be returned in the "return" clause above
});
};
})(jQuery);
EDIT:
the :hidden or :visible are not good cause they use offset which I believe is a bad idea.
After some time I found a great solution and I will share so others will not lose time as me:
(function($){
$.fn.visivel = function(parametro){
var parametro_padrao = {};
if (parametro){$.extend(parametro_padrao, parametro);}
elemento = this;
this.each(
function(index){
$(this).parents().andSelf().each(
function() {
if ( ($(this).css("display") == "none") || ($(this).css("visibility") == "hidden") ) {
delete elemento[index];
return false;
}
}
);
}
);
return elemento;
};
})(jQuery);
Use filter():
return this.filter(function(){
return mycondition?true:false;
});
Related
I am trying to get this accordion style faq-sheet to work. So far I can only seem to get the first element to show the hidden content. Here is my js:
var arrowIcon = document.querySelector('.arrow-icon');
var hidden = document.querySelector('.hidden');
var answer = 'answer';
arrowIcon.addEventListener('click', function() {
if (answer === 'hidden') {
answer = 'answer';
hidden.setAttribute('class', 'answer');
}
else {
answer = 'hidden';
hidden.setAttribute('class', 'hidden');
}
});
You need to use querySelectorAll and then iterate through each element and add click listener. Keep in mind that querySelectorAll returns a nodeList not an array. So if you want to use all the array functionality make sure you convert it into array.
Something like this should work:
var arrowIcon = Array.from(document.querySelectorAll('.arrow-icon'));
arrowIcon.forEach(el => {
el.addEventListener("click", => (event) {
// Your Code Here
})
});
I have two jQuery functions that work fine individually. Function A below, shows all, complete, incomplete items depending on the selection and it works fine. Function B show items according to the category(option) they belong to.
I now want to combine the two so that the filter works in this manner. User selects function B and selects the option and then the user can further refine, to see all items, completed or incomplete items only in the selected option.
JSFiddle
Function A:
$('.sort').click(function(){
var _t=$(this);
$('.sort').removeClass('active');
$(this).addClass('active');
if(_t.hasClass('showall')){
$('li.todo').show();
}else if(_t.hasClass('complete')){
$('li.todo').show();
$('li.todo').filter(function(){
return !!$(this).find('span.uncheck_box').length;
}).hide();
}else if(_t.hasClass('incomplete')){
$('li.todo').show();
$('li.todo').filter(function(){
return !!$(this).find('span.check_box').length;
}).hide();
}
});
Function B (dropdown):
$('.itemage').change(function(){
var select_val=$(this).val();
if($(this).val()=='10'){
$('li.todo').show();
}else{
$('li.todo').hide();
$('li.todo').filter(function(){
if($(this).attr('itemage')==select_val)
return true;
else
return false;
}).show();
}
});
You could trigger the handler of another event in your current handler by using trigger() method, the other option is combining the 2 handlers and listening to click event, if I have understood the question correctly something like the following should work:
$('.sort, .itemage').on('click', function (e) {
var $this = $(this).hasClass('sort')
? $(this).addClass('active')
: $('.sort.active');
var itemage = $('.itemage').val(),
b = itemage == 10;
$('.sort').not($this).removeClass('active');
if ($this.hasClass('showall')) {
$('li.todo').hide().filter(function () {
return (this.getAttribute('itemage') === itemage || b);
}).show();
return;
}
var sel = $this.hasClass('incomplete')
? 'span.uncheck_box'
: 'span.check_box';
$('li.todo').hide().filter(function () {
return (this.getAttribute('itemage') === itemage || b)
&& !! $(this).find(sel).length;
}).show();
});
http://jsfiddle.net/m5GWz/
I Updated you code with "showall" and "complete" exemple, change class="complete" to data-stat="complete" to simplify detecting what we need.
There is many other method more useful for this filter style, but if you will have only two option, this will be simple to use too.
I want to create an event when the content of a div changes, the event is called..
change = function(oldval,newval){
if (oldval != newval){
return true;
}
return false;
}
I want this function to be called everytime the content of a div changes ..Any idea how i can achieve this ?
I want this function to be called everytime the content of an element changes
If the content of an element equals to the value of form inputs:
One line code:
$(':input', $('#divId')).change(function(){alert('changed');});
Or the delegate option for dynamic added elements (still one line... (; ):
$('#divId').on('change', ':input', function(){ alert('changed');});
docs:
on
:input selector
If you arent planning on supporting IE you can use DOMNodeInserted and DOMNodeRemoved to check if elements are added or removed from your div.
$('#yourDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event, oldvalue, newvalue) {
if (oldval != newval){
return true;
}
return false;
});
for IE support you can use
$(function() {
var $div = $("#yourDiv");
var content = $div.html();
var look = setInterval(function() {
var newcontent = $div.html();
if (html != newcontent ) {
change(content, newcontent);
content = newcontent;
}
},100);
function change(oldval, newval() {
if (oldval != newval){
return true;
}
return false;
}
});
Let's say I have many of these in my content div : <cite class="fn">blabla</cite>
How can I check every cite tag's content (in this case: blabla) with class fn to see if it equals to "sometext" then change it's color to red ?
Very simple.
$('cite.fn:contains(blabla)').css('color', 'red');
Edit: though that will match "blablablabla" as well.
$('cite.fn').each(function () {
if ($(this).text() == 'blabla') {
$(this).css('color', 'red');
}
});
That should be more accurate.
Edit: Actually, I think bazmegakapa's solution is more elegant:
$('cite.fn').filter(function () {
return $(this).text() == 'blabla';
}).css('color', 'red');;
You can make use of the amazing .filter() method. It can take a function as its parameter, which will reduce the jQuery collection's elements to those that pass its test (for which the function returns true). After that you can easily run commands on the remaining elements:
var searchText = 'blabla';
$('cite.fn').filter(function () {
return $(this).text() === searchText;
}).css('color', 'red');
jsFiddle Demo
You could potentially do something like:
$('cite.fn').each(function() {
var el = $(this);
if (el.text() === 'sometext') {
el.css({ 'color' : 'red' });
}
});
This fires a function against each cite that has the class fn. That function checks if the current cite's value is equal to 'sometext'.
If it is, then we change the CSS color (text-color) property to red.
Note I'm using jQuery in this example, as you've specifically tagged your question jQuery. Ignore the downvote, this was applied before I edited a typo that I'd made (el.val() rather than el.text())
Without jQuery:
var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) {
if( (elms[i].innerText || elms[i].textContent) == "blabla") {
elms[i].style.color = "red";
}
}
I am moving from jQuery to MooTools (for the fun..) and I have this line of code :
$subMenus = $headMenu.find('li ul.sub_menu:visible');
How I can write this in mootools?
I know that I can use getElements but How I can check for visible ul?(I am using this(:visible) selector a lot).
Edit -
I implemented my own function :
function findVisibleElements(elementsCollection){
var returnArray = [];
elementsCollection.each(function(el){
if(el.getStyle('display') === 'block'){
returnArray.push(el);
}
});
return returnArray;
}
And what i want is to slide up all the visible sub menu, this is what I wrote :
// Sliding up the visible sub menus
if( visibleSubMenus.length > 0 ){
visibleSubMenus.each(function(el){
var slider = new Fx.Slide(el, {duration: 2000});
slider.slideOut();
});
}
Why my code isn`t working?My function is working, and the problem is with the Fx.Slide.
I added mootools more with Fx.Slide.
Just extend the selector functionality - it's MooTools!
$extend(Selectors.Pseudo, {
visible: function() {
if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
return this;
}
}
});
After that just do the usual $$('div:visible') which will return the elements that are visible.
Check out the example I've created: http://www.jsfiddle.net/oskar/zwFeV/
The $$() function in Mootools is mostly equivalent to JQuery's $() does-it-all selector.
// in MooTools
var elements = $$('.someSelector');
// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');
However, for this specific case since :visible isn't a real pseudo class, you'll have to approximate it using an Array filter in Mootools.
var isItemVisible = function (item) {
return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);
There might be other things that you consider make an item 'invisible', in which case you can add them to the filtering function accordingly.