I have a div that contains many spans and each of those spans contains a single href.
Basically it's a tag cloud. I have a textbox with a keyup event that filters the tag cloud div (It actually just hides the tags if not in filter condition).
Is there a way to get a count of the tags shown as the keyup event occurs?
Thanks,
rodchar
$("#filter_input").keyup( function() {
count = $("#cloud span:visible").size();
// Do something with the counted spans.
});
That should do it, substitute values as needed.
jquery size() Returns the number of matched elements.
$('.tags span a.visible').size();
Related
I have a textarea and button that I need to replace with new ones. I use replaceWith in jquery to achieve this but it seems that I'm doing it wrongly.
This is my javascript:
<script>
$(document).ready(function () {
$(document).on('click', 'div', function(){
$('textarea, button').replaceWith('<textarea>New</textarea><button>Old</button>');
});
});
</script>
My HTML:
<textarea>Old</textarea>
<button>Old</button>
<div>Replace</div>
Clicking the Replace div should replace both the Old text area and the button with the new ones but for some reason it leads to displaying 2 text areas and 2 buttons.
Tried using $('textarea', 'button') but this does nothing at all.
If per your comments elsewhere you cannot split the two elements apart for text purposes, then alternatively you should ensure that both existing elements share a common parent (e.g. a <div>) and then replace the contents of that parent:
<div id="parent">
<textarea>Old</textarea>
<button>Old</button>
</div>
$('#parent').empty().append(newContent);
Alternatively if you cannot change the downloaded HTML, then within the event handler if you can assume that there are no other matching elements between the "replace" div and the original content:
$(this).prevAll('button').first().remove();
$(this).prevAll('textarea').first().remove();
$(this).before(newContent);
You should separate the two out, to avoid trying to replace both in the same statement.
$('textarea').replaceWith('<textarea>New</textarea>');
$('button').replaceWith('<button>Old2</button>');
I have the Span Tag with the id attribute having different value inside a loop
like this:
<span class="articlehelp" id="#faqID#"></span>
I have the following jquery declared on dom ready
$('.articlehelp').load('getvoting.cfm?id=' + $('.articlehelp').prop('id'));
But it is loading everytime 1 rather than different id's
The Problem is that the selector for .acticlehelp selects all matching elements, but caling functions on this always takes the first matched element from the collection.
You need to loop over all .articlehelp to achive what you want.
I am not an expert in jquery but something like this may do:
$('.articlehelp').each(function (i, element) {
$(element).load('getvoting.cfm?id=' + $(element).prop('id'));
});
I have seen code like this, ajQuery.find() with parameters split by commas, i.e. div, input, select.
newRow.find('div, input, select').each(function() {
......
});
What does it mean? Is it something like "a select input box under div"? I couldn't find official document on this function.
It's a CSS selector. Known as "grouping", it means 'find all div, input and select elements'.
http://www.w3.org/TR/CSS2/selector.html#grouping
The code you provided would look in the object newRow for any div, input or select elements and it would then run the code in the each function for each one it finds.
I would like to replace the text on pages when I click on the text or even just replace the single word clicked on. I have tried a top down approach selecting all elements in the DOM, filtering out the textNodes, wrapping each with tags and adding a click event handler to each tag. But this is far too slow and inefficient particularly on very large and dynamic sites.
I only need to replace the text that was clicked. Is there a bottom up way of doing this starting from the event.target? How do I find the closest textNode to the event.target, for example?
In the example you gave, you can just do the following; for more info see How do I select text nodes with jQuery?
$(document).click(function(event) {
textNodes = $(event.target).contents().filter(function() {
return this.nodeType == 3;
});
textNodes.each( function() {
$(this).replaceWith("New Text");
});
})
Have you tried Jquery's .closest() ?
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?
I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/
$("input[title]").not('[title=""]')
var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute