I have content loaded into a hidden iframe on a page and I'm wanting to loop through multiple elements on a page and get text using jquery.
Here is my current code:
$('#myiFrame').contents().find('div.air').each(function (index) {
alert($(this).text());
});
It only seems to find the one div with the class of 'air', although there is two divs on the page. How is my code wrong ?
Edit: I should say their are two 'div.air' on the page not under the same parent.
HTML it something like :
<section id="blah">
<div class="air"> text here </div>
</section>
<section id="blah2">
<div class="air"> text here </div>
</section>
Worked out my own answer:
$('#iframe').contents().find('.air').each(function(){
var foo = $(this).html();
//do your Stuff here
});
Related
I am trying to write a simple script which will be able to read/display every single DIV one by one (without interfering with the other divs inside). Unfortunately, my idea didn't work as I thought it will. I achieved what I aimed for with .children().remove().each but found out that it skips the first div and deletes all the others inside. I will be really grateful if someone can help me or point what I am doing wrong.
$(function Testing(){
$("div").each(function(){
var Div = $(this).text();
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</body>
It looks like you want to have the nested structure. If that is the case you can do it at least a couple of ways:
$(function Testing() {
$("#container div").each(function() {
// my variation on this answer: http://stackoverflow.com/a/32170000/1544886
var Div = $(this).contents().not($(this).children()).text();
/* or another way: http://stackoverflow.com/a/33592275/1544886
var Div = $(this)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
*/
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</div>
I added div#container ONLY because I didn't like the extra alerts generated from the divs created by having a code snippet. It's not necessary to do this in your code... you can ignore it and just use your selector $("div").
To get your desired output, you need to change your HTML so that each div only contains the text that you want it to output.
You'll notice two blank alerts when running this code snippet. This is because there are additional divs placed in the code snippet by SO (hidden). These extra alerts would not show in your local script.
$(function Testing() {
$("div").each(function() {
var div_text = $(this).text();
alert(div_text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">Alpha</div>
<div id="Bravo">Bravo</div>
<div id="Charlie">Charlie</div>
<div id="Delta">Delta</div>
</body>
Also, use descriptive variables. It is best to start this practice now (since you're learning) so you don't form bad habits. I changed Div to div_text as an example.
I have this div structure after clicking inside class "4u" i am calling one click event but dont know how to get data inside <p> tag.
HTML:
<div class="4u 12u(mobile)">
<section>
<header id="dynamicCampingDesc13">
<p>Loren ipsum</p>
</header>
</section>
</div>
Click event:
$(function() {
$(".image").click(function() {
alert($(this).attr('id'));
});
});
First thing, you cannot click on the <a> tag, because of its empty nature. You do not have a clickable area. But although, you can make it clickable by giving some padding or setting width and height through CSS.
Secondly, the way you need to get the contents of the <p> tag is:
$(function() {
$(".image").click(function() {
$(this).next("header").find("p").text();
});
});
Finally, the class naming. The class 4u 12u(mobile) I am not sure if this is valid. It would be better to change it to something like 4u 12u-mobile.
So I am trying to do some inner HTML pop up window work, by using Jquery.contents() on a hidden div to place the content in the pop window on click.
For some reason, if any of the divs have an iframe in them, all the divs after them in the html will not be able to be appended. Is this some sort of bug? Here is an example:
<div class="hide">
<div id="apps">
<iframe src="http://ryansaxe.info/javascriptpaint" />
</div>
<div id="contact">
<ol>
<li>Phone: (111)-111-111</li>
<li>Email: email#gmail.com</li>
</ol>
</div>
<div id="resume">
<p>resume</p>
</div>
</div>
In the case above, only the #apps content reads, because it has an iframe, and all contents after that then don't read. If the div with the #apps id was last, every single one would have readable contents through Jquery.contents()
Jsfiddle
note:
Here is my jquery
$('.open').click(function(){
var name = $(this).attr("name");
var selector = $(name);
var cont = selector.contents();
$('#pop').append(cont.clone());
});
$('.close').click(function(){
$('#pop').empty();
});
Like scripts, you cannot use the /> syntax with iframes. Explicitly write out the </iframe>:
<iframe src="http://ryansaxe.info/javascriptpaint"></iframe>
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});
I am making a HTML page, with JavaScript. In the HTML is the first content of a div, but when the user clicks a button, the text changes.
The text in the div is actual content, and needs to be findable by Google. The text is now stored in a simple variable in the JavaScript file.
Questions:
- Is that text indexed?
- Are there any better ways to store the text?
You can keep the text in a div and then change the visibility to hidden
<div id="content" style="visibility: hidden;">
Div content
</div>
Then in javascript,
document.getElementById("content").style.visibility="visible";
should make the document visible. Since the text will be there in the source for the page, it will be indexed by google, but will be displayed only when you run that line of javascript.
Storing the text in js variables is generally not a good idea.
You can put this text in a hidden div instead, like this:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button onclick="replace_text();">
<script type="text/javascript">
function replace_text() {
var target = document.getElementById('target');
var second = document.getElementById('second');
target.innerHTML = second.innerHTML;
}
</script>
In that case your second text will be indexed by Google.
Of course you better use any js framework like jQuery or Mootools.
Mootools example:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button id="button">
<script type="text/javascript">
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('target').set('html', $('second').get('html'));
});
});
</script>
Javascript is not searched, see googles answer:
http://www.google.com/support/customsearch/bin/answer.py?answer=72366
I found a good article about hide/display content only with CSS. It's working without Javascript: http://www.devinrolsen.com/css-hide-and-display-content/