Selecting <p> within a div using jQuery - javascript

I want to select the second <p> tag and style it within a itemize class div. Here is the example HTML:
<div class="itemize">
<p> Order Summery</p>
<div>
<p><strong>Packages:</strong> </p> <!-- i want to select this P tag-->
<p><strong>Date:</strong> </p>
<p><strong>Style:</strong> </p>
</div>
</div>
I want to select and style the first <p> which is immediately after the second <div>. The second <p> has no ID or class.
How can I select it via jQuery?

$('.itemize div p:first').html()
Check this link: http://jsfiddle.net/QJTYx/
If you want to add class to that p tag:
$('.itemize div p:first').addClass('selected');

You can do this way:
$('.itemize > div > p:eq(0)')
.itemize > div goes till:
<div class="itemize">
<p> Order Summery</p>
</div>
And
.itemize > div > p:eq(0)
<div class="itemize">
<p> Order Summery</p>
<div>
<p><strong>Packages:</strong> </p>
</div>
</div>
The > allows to target direct children whereas eq(index) is used to get first p that you want.

var test = $('.itemize')​.find('div:first')​.find(​'p:first')​​​.html();
alert(test);
​
Try here: http://jsfiddle.net/arvind07/H8vwA/

$('.itemize>div>p:first').addClass('someClass');

This should do the trick
$('.itemize div p').first().addClass('hello');

You can try this..
$(".itemize div p:first").text();
hope it will works..

$('.itemize>div>p').first().css(styles go here) most of the ones above work as well
jQuery selectors work a bit like css selectors, check out this tutorial to get more info.

Related

How to remove div with a particular text in it

I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript
If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();
Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>

jQuery: Select grandparent's h1 tag

I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.
I've tried giving the h3 tag a class, then the following:
$('h3.myclass').parent().closest('h1').css('display','none);
and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.
Can anyone help me out?
EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!
Use closest() to traverse up to the grandparent
Use find() to select the desired elements
You can use hide() in place of css('display', 'none') as they are equivalent
var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3 class="myclass">Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I can think of two selectors that might work assuming you put .myclass back in.
$('.myclass').closest('.grandparent').find('h1').css('display','none');
or
$('.myclass').parent().siblings('h1').css('display','none');
have direct control over which is the h3
Try utilizing .parent() , .siblings()
$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
You may use:
$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();
> is for direct descendant element.
closest() selects ancestors, what you want is siblings().
So:
$('.your_h3_class').parent().siblings('h1')
will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.
And you can iterate through those and hide them (in case there is ever more than one)
If the title is always immediately before the div with the "otherstuff" class, then you could use this:
$('.otherstuff').prev('h1').css('display', 'none');
Documentation here: https://api.jquery.com/prev/

Clone Div into another DIV

I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.

Select grandchildren inside a parent div using Jquery

Below is the code I am working with, as you can see, there is an id named "parent" and an id named "grandchilden". My goal is to get the content inside of this div "grandchildren". How can I achieve it?
I've tried $(this).closest('.grandchildren'), but didnt work.
<div id="parent">
<a href="#">
<div>
<p id="grandchildren">
This is a content
</p>
</div>
</a>
</div>
If you have a ID on that div you can use $('#grandchildren').html()
If you don't have a ID for it, what is the pattern? div > a > div > p ? In that case you can use this:
$('div#parent > a > div > p').html();
Demo here
Please notice the difference between .text() and .html(), if you just need to get text use .text() instead of .html()
If you have a reference like this you could use find which searches downwards, with the selected element as starting point:
$(this).find('.someClass')
$('#parent').find('#grandchildren').text();

Selecting child elements with jQuery

I'm trying to quickly select an element on my page using jQuery. This is the code so far:
$('#row-58708 > div.cell name > div > strong').html('tesing');
This is the markup:
<div id="row-58708" class="row">
<div class="cell name">
<div>
<strong>Skin name</strong>
</div>
</div>
</div>
I know what I've written is far off the mark, but I can't work it out anyhow... could anyone lend a hand? Cheers!
You're actually not far off, you're just not using the multiple class selector correctly:
$('#row-58708 > div.cell.name > div > strong').html('tesing');
In your version, you have div.cell name, which literally means "select all name tags that are within a div of class cell." Of course, there is no name tag, but you see the point.
$('.row').find('strong').html('tesing');
Check working example at http://jsfiddle.net/gZA8E/
I take it you want to change Skin name to testing. If so use this:
$('#row-58708 strong').html('testing')

Categories