I want to hide specific words in an HTML div without losing format in javascript/jquery. This is what I've tried but it messes with the style/format.
HTML code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="ctl00_ctl40_g_fa7fc6e0_693d_4dde_91fd_1dbe1d7d0e76_ctl00_ListForm2_formFiller_ctl02"
class="summary">Count the number of texts:
<ul><li>Text 0</li>
<li>Text 1</li><li>Text 2</li>
<li>Text 3</li><li>Text 4</li>
<li>Text 5</li></ul>
</div>
JS code:
$(function() {
$('.summary').each(function() {
var $this = $(this);
$this.html($this.text().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
});
});
I have also created a JSFiddle here. Please try running it without JS function first and then with the JS function to understand what I mean by style/format.
You are replacing the html with only the text content changed, so you keep the text but loose all html elements. This way you can keep the html:
$this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
A nicer way of doing this is just to replace the text node content:
$('.summary').contents().first()[0].textContent='Texts:';
is this what you wanted?
$(function() {
$('.summary').each(function() {
var $this = $(this);
$this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
});
});
You should be replacing the html not the text nodes.
http://jsfiddle.net/sLa3dkdd/1/
Related
Need some help with jQuery DOM.
I need to extract the content of the id. I have a list that user can select and it will filter the hotspot of the map. After user select, I want filtertitle to display the new selected filter. I can apply the "id" to the filter title but not sure about the content because the content has Shopping / Dining. Someone please.
HTML
<div class="map-filter">
<div class="filtertitle">All Categories</div>
<ul class="filter-list">
<li class="active" id="All Categories">All Categories</li>
<li id="Shopping">Shopping/Dining</li>
<li id="Hotel">Hotels & Resorts</li>
<li id="Art">Art Galleries</li>
</ul>
</div>
jQuery
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html(id); //This part is where I set the id
});
Use .text(), it gives you the text content of the desired element.
$('.filtertitle').html($(this).text());
In case of html content use .html().
$('.filtertitle').html($(this).html());
If I'm understanding what you're asking correctly then you can try something like this.
$('.filter-list li').click(function(e){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(e.currentTarget).text());
});
JSFiddle - https://jsfiddle.net/583zgs57/
Instead of simple setting id, you can use $(this).text(); to fetch the text content of current element.
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(this).text());
});
as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu.
What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names.
I tried doing something myself but I'm probably missing something..
Any assistance would be appriciated
I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/
HTML:
<div id="header">
<div id="menuBlock">
<ul id="menu">
<li>Novosti</li>
<li>Program Mladi</li>
<li>Program Odrasli</li>
<li>Program Upisi</li>
<li>Galerija</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<body>
<div id="main">
<div id="novosti" name="sekcija1" class="sekcija">
aaaa
</div>
<div id="programMladi" name="sekcija2" class="sekcija">
aaaa
</div>
<div id="programOdrasli" name="sekcija3" class="sekcija">
aaaa
</div>
<div id="programUpisi" name="sekcija4" class="sekcija">
aaa
</div>
<div id="galerija" name="sekcija5" class="sekcija">
aaaa
</div>
<div id="kontakt" name="sekcija6" class="sekcija">
aaa
</div>
</div>
</body>
Javascript:
$(document).ready(function() {
$("#menu").click(function(e) {
var selected = this.attr('href');
$('#main' + selected).show('slow').siblings().hide('slow');
});
});
EDITED:
Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).
UPDATE:
In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.
In that case my javascript looked like this.
$(document).ready(function(){
$("#menuBlock div ul li a").click(function (e){
e.preventDefault();
var selected = $(this).attr('href');
$( selected ).fadeIn('slow').siblings().hide();
});
});
There should a space between 2 selectors if they have a parent child relationship, so change this line
$('#main' + selected).show('slow').siblings().hide('slow');
to
$('#main ' + selected).show('slow').siblings().hide('slow');
or simply the selected one (since it is already pointing to a specific element)
$(selected).show('slow').siblings().hide('slow');
check this updated fiddle
$(document).ready(function(){
$("#menu li a").click(function (e){ //bind the event on `a` rather than ul
var selected = $(this).attr('href'); //use $(this) instead of this
$( selected ).show('slow').siblings().hide('slow'); //explained above
});
});
There are more than one errors found in your code,
set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.
Try,
$(document).ready(function() {
$("#menu li a").click(function(e) {
e.preventDefault()
var selected = $(this).attr('href');
$('#main ' + selected).stop().show('slow').siblings().hide('slow');
});
});
DEMO
Try this method
$(document).ready(function() {
$("#menu a").click(function(e) {
debugger;
var selected = $(this).attr('name');
$('#main div').hide();
$('#main div[name="'+selected+'"]').show('slow');
});
});
You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach
$(document).ready(function(){
$("#menu").click(function (e){
var element = $(e.target).attr('href');
$('#main-divs > ' + element).show('slow').siblings().hide('slow');
});
});
I'm basically trying to replicate what you get on google images with a div appearing from an onClick event directly below the row of images containing the anchor that is clicked. I've found code for the show and hide methods which is pretty easy, as per below:
$(document).ready(function(){
$("#hide").click(function(){
$("#imageBox").hide("slow");
});
$('a').click(function(){
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "images/profiles/male-silhouette.jpg" style="margin:20px;" />';
});
});
However I can't get around the div appearing wherever I place it in the HTML. For instance, in the code below the div with image and text will obviously always appear between the first and second lists, in the same place:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div id="imageBox">
<button id="hide" class="hButton">X Close</button>
<p id="displayImage"> </p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
After searching on Google and Stack Overflow I've not even come close to learning how to do this. Can anyone point to some open source code or a tutorial?
jQuery is used to select elements and apply CSS to them and much more. You can learn a lot about jQuery on their website:
http://api.jquery.com/id-selector/
The CSS is what provides the animation, with 'transitions'.
a box opening would change size (height for example) and you'd want to put a transition tag on the height property in the CSS of the particular div.
http://css3.bradshawenterprises.com/transitions/
To learn jQuery, CSS, HTML and all, I recommend starting with W3Schools:
http://www.w3schools.com/default.asp
http://www.w3schools.com/css/css3_intro.asp
http://www.w3schools.com/jquery/default.asp
you can try
$('button funtion').on('click', function(event) {
$('sample1').className;
$('sample1').removeClassName('hidden');
$('sample1').className;
$('sample2').className;
$('sample2').addClassName('hidden');
$('sample2').className;
});
attribute hide must be created in css
hidden {
visibility: hidden;
}
or you can searh for toogle class, this method invert the property
$("button").click(function(){
$("p").toggleClass("hidden");
});
You have the placed the document.getElementById("displayImage").innerHTML in the $('a').click(function () { where there is no anchor tag at all in the markup..
put the code inside the document.ready
$(document).ready(function () {
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
$('a').click(function () {
$("#imageBox").show("slow");
});
});
DEMO FIDDLE
NOTE: can't understand your $('a').click(function () { as i can't see any anchor tags in the markup.
Change after your comment:
$(document).ready(function () {
$("#imageBox").hide();
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
$('a').click(function () {
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
});
});
UPDATED FIDDLE
I am using below Html code and I want to get all the <li> tags from the <div id="divSelect"> and I want to get text from all li tags.
Please help , how to use .each() and .find() using JQuery.
Thanks
Hey I have used your html and wrote a jQuery function which is using .each and .find to fetch all the li from the DIV.
we should use .find where we can use, its recommened by jQuery.(its performance is good if it is user wisely)
html code:-
<div id="divSelect" class="custom dropdown">
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>
</div>
and javascript code is:-
$("#divSelect").find("li").each(function()
{
var $li=$(this);
alert($li.text())
});
thanks
To get them in array,You can use:
var alllitexts=$('#divSelect ul li').map(function(){
return $(this).html();
}).get();
using each and getting them individually:
$("#divSelect ul li").each(function(){
alert($(this).html());
});
$("#divSelect > ul > li").text();
With this you get text from all li elements.
fiddle
try this:
var liText='';
$('#divSelect ul li').each(function(){
liText+=$(this).html();
});
liText will contain all the "li"s texts.
This can be achieved by
$("#divSelect ul li").each(function(index){
alert ( index + ": " + $( this ).text() );
});
$("#divSelect").find("li").each(function(){
alert($(this).html());
});
Use map in jquery to collect all data ,this.outerHTML in javascript to return the html element
var data=$("#divSelect ul li").map(function(){
return this.outerHTML;
}).get();
alert(data);
DEMO
I have a series of unordered lists wrapped in another unordered list. The task is to separate the individual li tags with commas and omitting the each list's last li tag.
I can do it on an individual list level i.e. When testing with just one list I was able to remove the last comma from the last element. But when I'm trying to apply the JavaScript in affects the last li element of the wrapping ul...
Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('.tagsList li span').each(function () {
$(this).append(',');
});
var lTag = $('.tagsList li:last span').text().replace(',','');
$('.tagsList li:last span').text(lTag);
});
</script>
<ul class="postsList">
<li>
<ul class="tagsList">
<li><span>tag1</span></li>
<li><span>tag2</span></li>
</ul>
</li>
<li>
<ul class="tagsList">
<li><span>tag1</span></li>
<li><span>tag2</span></li>
</ul>
</li>
</ul>
You should use a slightly modified selector
$('.tagsList li:not(:last-child) span').each(function () {
$(this).append(',');
});
This directly target all the span elements inside a li except the last li of each list.
demo http://jsfiddle.net/gaby/wwTjH/2/