I have following html code
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
Here is the html content
var html = $(".main").html();
I need to get the following htm in a variable
<div class="main">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
<br>
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
<br>
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
I tried following code
var text = $('div.main div').contents().unwrap().siblings('div').remove();
The variable "text" will get an object and i need the html content in a variable.. Please help me to find it.
Is their any possibility to export the customised html or xml format from etherpad ??
May it Help!
var htm = "";
$("div[id^='magicdomid']").each(function(i,val){
htm = htm + $(this).html();
});
$("div[class='main']").empty().html(htm);
//You can also use this for the same
$("div[id^='magicdomid']")
.contents()
.filter(function() {
return this.nodeType === 1;
})
.unwrap()
.end()
.filter(function() {
return this.nodeType === 3;
})
.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
unwrap and contents might not be the best to use in this case as they tend to modify the actual DOM tree rather than the html variable.
Try this:
// create empty div
var htmlContent = $('<div class="main"></div>');
// loop over magic class & append its content
$('.main .magic').each(function(i, n) {
htmlContent.append($(this).html());
});
// wrap & move one level above to get "main" div in html string
htmlString = htmlContent.wrap('<div></div>').parent().html();
console.log(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="magic">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class="magic"><br></div>
<div id="magicdomid4" class="magic">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class="magic"><br></div>
<div id="magicdomid6" class="magic">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
Related
I wrote a function that dynamically creates a webpage for me based on a json database.
Now I want to add 2 functions:
If you click the like img (its got the id button) the like counter should increase on the webpage by 1. Pretty easy just a on(click) with jQuery variable++ and then .text(variable)
A sort function - based on the likes one item received, you should be able to sort it (most liked div first, 2nd, 3rd....
I can write it for each individually with individual variables when I give all the like buttons and outputs a separate id but I wanted to make it dynamic so if you add new data to json file it dynamically works with the like and sort function.
The likes are not saved anywhere for now.
Since sitting on it for 3h and google so much and so much stackoverflow I think I overloaded my brain with different stuff and now nothing seems to work ^^
function filmInsert(insert) {
$.each(film, function(i, data) { //.each statt loop
let box =
`<div class="boxwrapper">
<div class="imgbox">
<img src="${data.img}" alt="${data.titel}">
</div>
<div class="textbox">
<h3>${data.titel}</h3>
<p>${data.beschreibung}</p>
<p> <a id="button${data.id}">
<img src="img/budspencer_official.png"> Like
</a>
<span class="output${data.id}">${data.likes}</span>
</p>
</div>
</div>`;
insert.append(box);
});
}
I've added a container element for the boxwrapper items as I assume you have one and as it's better to have one instead of just adding the sorted items to the body of the HTML document.
$(document).on("click", ".textbox a", function() {
let likes = parseInt($(this).closest(".textbox").find("span").text());
$(this).closest(".textbox").find("span").text(likes + 1);
});
$("#sort").on("click", function() {
let divs = $(".boxwrapper")
let sorted = divs.sort(function(a, b) {
return $(a).find("span").text() < $(b).find("span").text() ? 1 : -1;
});
$(".container").html(sorted);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel</h3>
<p>Description</p>
<p> <a id="button1">
<img src="https://dummyimage.com/40x40/000/fff&text=1"> Like
</a>
<span class="output1">0</span>
</p>
</div>
</div>
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel 2</h3>
<p>Description 2</p>
<p> <a id="button2">
<img src="https://dummyimage.com/40x40/000/fff&text=2"> Like
</a>
<span class="output2">0</span>
</p>
</div>
</div>
</div>
<button id="sort">
Sort
</button>
Well I am learning javascript and I am trying to write a function which would look if(href.contains(1234567) and change class="price" value to any number.
I tried googling but I cant seem to find an answer to this
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
I expect class="price" value to be changed to some number
You can use the a[href*=1234567]+.price selector to do it.
a[href*=1234567] select all <a> elements that have a href attribute value containing "1234567" and +.price select element has class price placed immediately after that a[href*=1234567].
Demo:
$('a[href*=1234567]+.price').text(123456)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div></a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
<a href="https:someUrl.com/test">
</a>
<div class="price">
ValueNoNeedsToBeAddedHere
</div>
A solution with jQuery:
function myFunction() {
var str = $('#link').attr('href');
if (str.indexOf("1234567") >= 0){
var x = document.getElementsByClassName("price");
var y = x[0];
y.classList.add('myClass');
y.classList.remove('price');
y.innerHTML = "123456"
}
}
myFunction();
.myClass{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a id="link" href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
You can do without jquery :-
<div class="product-info">
<a href="https:someUrl.com/1234567" id="link_id" onclick="check(this.href)">
<div class="title">
Some Sweet Title
</div></a>
<div class="price" id="setvalue">
ValueHereNeedsToBeAdded
</div>
</div>
function check()
{
event.preventDefault();
var href = document.getElementById("link_id").getAttribute("href");
if(href.includes(1234567))
{
document.getElementById('setvalue').innerHTML = '1313133';
}
}
I want to make hidden divs show when a title is clicked. I have chosen jQuery to do this with the slideToggle. I set the to have a class of "clicker-2", and the div is class "skill-talk_holder" that has the content is set to be hidden by CSS. There are multiple divs with the class of "skill-talk_holder" so I have to use something that will only open one at a time, and not all of them when "clicker-2" is clicked.
However, the only thing that happens is the page reloads (by just going to the top, not with a new HTTP req).
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
$('.clicker-2').click(function() {
$(this).siblings('div').slideToggle("slow");
});
});
</script>
And the HTML
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
Given your comments, you could use .nextAll()
$(document).ready(function() {
$('.clicker-2').click(function(event) {
event.preventDefault();
$('.skill-talk_holder').slideUp('slow');
$(this).parent().nextAll('.skill-talk_holder:eq(0)').slideToggle('slow');
});
});
.skill-talk_holder {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
it's just lacking of parent selector:
$(this).parents('.divider:first').siblings('div').slideToggle("slow");
I need to programmatically extract titles within a webpage, inject anchor links right above those titles and then inject navigation links near the top of the page that will link to those anchors within the same page.
I need jQuery to select all headings with the class of 'iphorm-group-title’ and extract the text.
Above each heading, excluding the first heading, an anchor tag needs to be injected so that a visitor can link to that section of the page.
The text of each heading, excluding the first heading, needs to be injected before the first heading and linked to all the anchor tags that were injected in the previous step.
This form is generated by a plugin or I would just edit the HTML.
For reference, the page is located at:
http://mountpleasantmagazine.com/BestOfBallot/
Here is an example of the HTML as of now.
<div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
Here is some JS that will grab the elements and loop through the text, which is the point where I'm stuck.
jQuery('.iphorm-group-title').each(function () {
console.log(jQuery(this).text());
});
Here is how the HTML is expected to look after injecting the code.
<div>
<div>
SHOPPING & GOODS | FOOD & DRINK | <a href="#entertainmentleisure">ENTERTAINMENT & LEISURE</ a>
</div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<a name="shoppinggoods"></a>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<a name="fooddrink"></a>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<a name="entertainmentleisure"></a>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
I just made a code snippet for you hope so it's the exact what you needed.
var listElement=jQuery("<div id='menuList'></div>").insertBefore(".iphorm-elements");
jQuery(".iphorm-elements .iphorm-group-wrap:not(:first-child)")
.each(function() {
if (jQuery(this)
.not(".iphorm-group-wrap:first")) {
var heading = jQuery(this)
.find(".iphorm-group-title");
var headingName = heading.text()
.split(' ')
.join('')
.replace('&', '');
var lowerHeading = headingName.toLowerCase();
var anchorUrl = [lowerHeading.slice(0, 0), lowerHeading.slice(0)].join('');
var anchorText = heading.text();
var anchorLink=jQuery('<a name="' + anchorUrl + '"></a>')
.insertBefore(heading);
var anchorLink2=jQuery('' + anchorText + '' +"<span> | </span>")
.insertBefore(heading);
jQuery(listElement).append(anchorLink2);
}
});
jQuery("#menuList span:last-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iphorm-elements">
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">VOTER INFO</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
</div>
Imagine you had html code like this:
<div id="2761421" class="..." data-attributionline="testtext wrote at..." data-created-at="1342689802000" data-updated-at="1342689802000" data-user-id="36847" >
<div class="subject"> <strong>
<a name="2761421" href="#2761421">wee</a></strong>
</div>
<div class="info">
<div class="author"> author:
<span class="name"> testtext (
we)
</span>
</div>
<div class="date"> date:
<time datetime="dfgdf">dfgdfg
</time>
</div>
</div>
<hr style="clear: both;" />
<div class="text gainlayout"> some text
</div>
<div class="foot gainlayout unselectable">
<span class="menuitem postmenuitem-report">
cvbcvb
</span>
</div>
</div>
What would the javascript code look like that searches the whole document for parts where the div with data-attributionline= contains testtext to replace the whole cited div from start to finish with "Filtered"?
or
What would the javascript code look like that searches the whole document for
<span class="name">
where the name contains testtext to replace the whole div starting from
<div id="<someid>" class="..." data-attributionline="testtext<some text>" data-created-at="<somedate>" data-updated-at="<somedate>" data-user-id="<someid>" >
to the last div, ie
</span>
</div>
</div>
with "Filtered"?
There is a whole bunch of attribute selectors (see also CSS), that will match elements with attributes that start with or contain testtext.
In javascript, you can use document.querySelector[All]() or a library function that supports those to get the elements, then remove them.