Get all the paragraph of a class - javascript

I am trying to echo all the paragraphs of a specific class. The source code has this structure:
<div class='example'>
<p> this is the first paragraph </p>
<p> this is the second paragraph </p>
</div>
I have tried different ways (getElementsByTagName and stuff like this but they didn't work). Could you suggest me something?

Simply get the value by classname.
Use Js Function getElementsByClassName
Try below code for Javascript :
var x = document.getElementsByClassName("example").innerHtml;
console.log(x);
alert(x);
Also working jsfiddle with javascript - https://jsfiddle.net/ayh0gk7s/1/
If you are prefer to use jQuery then try below code :
$('.example p')
jsfiddle link for jquery - https://jsfiddle.net/3nhb1agu/

Fetch them via XPath:
$doc = new DOMDocument;
$doc->load('file.html');
$xp = new DOMXPath($doc);
$pars = $xp->query('//div[contains(#class, "example")]/p');
// For exactly one class:
//$pars = $xp->query('//div[#class = "example"]/p');
foreach ($pars as $p) {
var_dump($p->nodeValue);
}
The code fetches text representations of the paragraph nodes.

In JQuery, you can print the parent children element. Try this !
$(document).ready(function(){
$("div.example").children("p").each(function(){
alert($(this).text());
console.log($(this).text());
});
});

Using jQuery:
$('.example p')
This should hopefully get you the desired paragraphs.

You can use querySelectorAll.
var myParagraphs = document.querySelectorAll('.example p');
for (var i = 0 ; i < myParagraphs.length ; i++) {
console.log(myParagraphs[i]);
}

Related

how do I display the content of <p> in jquery

<div class="albumclass">
<img width="100" height="100" data-assigned-id="9" src="/Content/images/fold.png">
<p>15Sep2015</p>
</div>
The above code is generated dynamically through jQuery. After that I need to display the content of <p> ie., '15Sep2015' by clicking on the above image. How can I get this? I used the below code:
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("p").text();
alert(txt);
}
But that alerts nothing.It not possible to take content implicitly because a lot of similar div will be there.
The .closest() gets the parent. So use .siblings() or .next. I have used .next():
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).next("p").text();
alert(txt);
}
You can go up to parent div and find p using find() :
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("div").find('p').text();
alert(txt);
}
Hope this helps.
$('.albumclass').on('click', function(){
var p_text = $(this).children('p').text();
alert(p_text);
});
Why not try adding a class to the 'p' tag so that u can get the element by a class selector and see
var text = $('.class').text();alert(text);
or u may try
$(document.body).on('click','.class',function(){
});

count of dynamically created DIVs returning zero

Following is my code and relevant HTML , what i wanna do is that i wanna count the number of search-img-box within search-img-ctrl but i get 0 as output, just to tell here that
following div search-img-box is dynamically created.
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl').filter('.search-img-box').length;
alert(numberOfDivs);
});
following is my HTML
<div id="search-img-ctrl" class="search-img-ctrl">
<div id="search-img-box" class="search-img-box" name="search-img-box">
<img width="335" height="206" src="" alt="">
<ul>
</div>
<div id="search-img-box" class="search-img-box" name="search-img-box">
</div> </div>
Here's a fiddle: http://jsfiddle.net/t5jcT/
I changed filter to find and got rid of the duplicate ids in the html.
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl').find('.search-img-box').length;
alert(numberOfDivs);
});
or you can use selectors instead of the find as others have pointed out:
jQuery(document).ready(function() {
var numberOfDivs = jQuery('#search-img-ctrl .search-img-box').length;
alert(numberOfDivs);
});
use .find instead of .filter:
var numberOfDivs = jQuery('#search-img-ctrl').find('.search-img-box').length;
alert(numberOfDivs);
If you want to only find the number of direct children with that class you can use .children
var numberOfDivs = jQuery('#search-img-ctrl').children('.search-img-box').length;
Also make sure you edit your html so that your html elements don't have duplicate IDs

Replace the text using javascript

Im using the below code to replace the text within the h1 tag, but its not getting effected. I want to replace "sample" to "new sample". I'm doing wrong?
<div class="content">
<h2>sample</h2>
</div>
var t = jQuery('.content');
t.children("h2").each(function() {
var contents = jQuery(this).contents();
jQuery(this).replaceWith(new sample);
});
use .html() to set html.try this:
$('.content h2').html('new sample');
Working Demo
If you want to replace some part of content then try this:
jQuery('.content h2').each(function(i, v) {
$v = $(v);
$v.html($v.html().replace('sample', 'new sample'));
});
jsFiddle
Use jQuery's .text()
$(".content h2").text("new sample");
FIDDLE
You can do that without jQuery:
var elem = document.getElementsByTagName('h2')[0];
elem.innerHTML = "New Value";
Set .text()
t.children("h2").text('new sample'));
If you want to set .html() content
t.children("h2").html('new sample'));
Child Selector (“parent > child”)
$('.content > h2').html('new sample');

Get Inner HTML of Multiple Elements

I want to get the content of multiple Spans. Here is my code:
http://jsfiddle.net/4XumV/
It's supposed to give me "111, 222, 333, 444". It gives me "undefined" instead.
What's wrong with my code?
Well, you weren't actually getting the innerHTML property, you were getting an undefined html property. Change it to innerHTML and it will work.
http://jsfiddle.net/4XumV/1/
This should work:
$(function()
{
var allLatestNews = $("#main").find('span');
$.each(allLatestNews, function(i,val){
alert($(val).text());
});
});
I was wondering WHY your code wasn't working and JQuery does return an array of elements from the selector, this could have also worked:
for(var i = 0; i < allLatestNews.length; i++)
{
alert($(allLatestNews[i]).text());
}
First wrap the element as a JQuery object and then querying text() not html, which is accessed by a function not a property.
Your updated fiddle: http://jsfiddle.net/4XumV/9/
You seem to be confusing jquery's html with innerHTML.
You can either use innerHTML:
http://jsfiddle.net/4XumV/3/
alert(allLatestNews[i].innerHTML);
or jquery's html:
http://jsfiddle.net/4XumV/5/
alert(allLatestNews.eq(i).html());
Try this it should work
allLatestNews.each(function()
{
alert($(this).html());
});
var $elms = $('#main').find('span');
$elms.each(function(){ alert($(this).text()); });
http://jsfiddle.net/4XumV/2/
This is working
var allLatestNews = $("#main").find('span');
$.each(allLatestNews ,function( index , value){
console.log($(value).html());
});
instead of console.log($(value).html()); you can write alert($(value).html());
The property of a DOM element to return the inner HTML is named innerHTML not html
allLatestNews[i].innerHTML
Or using jQuery
$(allLatestNews[i]).html()
Updated JS Fiddle
you can also use this
var allLatestNews = $(this).find("#main span");
for(var i = 0; i < allLatestNews.length; i++)
{
alert(allLatestNews[i].innerHTML);
}

jQuery addclass to each Wordpress post image

this is what I have so far:
<script>
$(document).ready(function(){
$(".entry-content img:first").addClass('postimage');
});
</script>
As you can see, for the first image of .entry-content it adds my class. Cool, that works fine. Uncool, it doesn't work for every post but only the first on the page.
I'm not sure how to fix this. Do I need to use .each in some way or is there something wrong with what I have already?
Thanks
This is because the CSS selector is selecting the first .entry-content img, not the first img in every .entry-content. It's about operator precedence.
You can iterate through each .entry-content and select the img:first in that node manually, though.
$(document).ready(function(){
var entries = document.querySelectorAll('.entry-content');
for (var i = 0; i < entries.length; i++) {
var firstImage = $(entries[i].querySelectorAll('img:first')[0]);
firstImage.addClass('postImage');
}
});
this will iterate over all your posts and apply the class to the first image within each.
$.each('.entry-content', function() {
$(this).find('img:first').addClass('postImage');
});
A variation of Paul Dragoonis' answer:
$(".entry-content").each(function ()
{
$("img:first", this).addClass("postImage");
});

Categories