Select grandchildren inside a parent div using Jquery - javascript

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();

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 custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear
When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')
Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')
Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.
You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....
I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});
give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

Selecting <p> within a div using jQuery

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.

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')

Telling jQuery which (unique) div to do an action on

My plan is to have lots of boxes (an undefined amount). When show box is clicked under a box, it shows that particular box.
I have some unique divs in my html. The div is made unique by:
<div id="box-<%=box.id%>"></div>
In my application.js, I have
$('.show-box > a').click(function(){
$('#box').show();
});
I obviously need to have the box-id in the $('#box').show(); part but I'm unsure how to do that...
EDIT: adding more information
<div class="show-box">
Show
</div>
<div class="box" id="box-<%= box.id %>"></div>
The class is for styling.
Just to add, I know that the javascript link should link to an actual link. I'll fix that later.
You would use this inside the handler to refer to the specific .show-box > a that was clicked.
So it depends on what the relationship is between that and the box element you want to display.
When you say under, if that means that it is a sibling to the .show-box element, you can use .parent() to traverse up from the <a>, then use .prev() to traverse back to the box.
$('.show-box > a').click(function() {
// "this" refers to the <a> that was clicked.
$(this).parent().prev().show();
});
Ultimately, the correct solution depends on your actual HTML markup. If you provide that in your question, it would be helpful.
You could select by ID if you want, but it is often not necessary.
On easy way would be to name your box ids after you a ids, or write another attribute into the a. For example if your a tag's ID was "anchor1", assign the corresponding div an id of "box-anchor1". Then, reference it like this:
$('.show-box > a').click(function(){
$('#box' + this.attr('id')).show();
});
If the box and the link that shows it are logically related, you can skip the whole unique ID business by using the following:
HTML
<div class="container">
<div class="box">
<!-- stuff in the box -->
</div>
Show
</div>
jQuery
$("div.container a").click(function() {
$(this).prev().show(); // prev() will get the div.box element.
});
On the other hand, if they are not related structurally, you can use the fragment part of the URL to reference the box ID:
HTML
<div>
<div class="box" id="box-1">...</div>
<div class="box" id="box-2">...</div>
</div>
<div>
<a class="boxtoggler" href="#box-1">Show Box 1</a>
<a class="boxtoggler" href="#box-2">Show Box 2</a>
</div>
jQuery
$("a.boxtoggler").click(function() {
var boxId = $(this).attr("href");
$(boxId).show();
});
Note how we're abusing the fact that the fragment section of a URL is preceded by a # character to make it into a css ID ;)
Not sure I understood your question, but if you want to show the clicked box:
$('.show-box > a').click(function(){
$(this).parents('.show-box').show();
});

Categories