Here's the problem; I have a couple of divs like the one below, same class name, no id. I need to modify the <span> text below the <h4> tag, based on where's the mouse cursor on those 3 images. I do this using javascript, by using mouseenter() method. The problem is that the method changes every span text from whole web page, not only from the class with class name "parent" where the mouse cursor is at the moment.
<div class="parent">
<div class="parent.child">
<div class="parent.chil.child">
<div class="parent.chil.child.child">
<img src ="link1" data-price="a">
<img src ="link2" data-price="b">
<img src ="link3" data-price="c">
</div>
</div>
</div>
<h4>
text
</h4>
<p><span class = "spanClassName">text to be changed</span>some text</p>
<div class=child1"></div>
</div>
How do I select only the link where's the mouse, from the curent "parent" div, even if there are several div with same class name, "parent".
I hope I was understood, if not, please ask and I try to explain more.
You can use .closest() to find parent with .parent class
$('.parent\\.chil\\.child\\.child img').on('hover', function(){
$(this).closest('.parent').find('.spanClassName').text($(this).attr('data-price'))
});
DEMO
Additionally as per documents you need to escape . in your selectors
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").
If you already know the specific parent node, just use parent.find('.spanClassName'). If you don't have the parent node, but you know which link the mouse is on, you can use link.closest('.parent').find('.spanClassName').
Related
<div>
some text
<img />
<br>
text I want to select
<br>
<img />
some text
</div>
The HTML is like above, I want to select the text between the two images, is there anyway to do this?
Some background: I am trying to format some poorly written HTML so it can be further stylized. There are too many pages of them to hardcode it one by one, they have some certain pattern though, so I am trying to write a javascript function to make the whole procedure easier. The text between <br> is actually the description of the first image, I want to wrap it with <div> so I can add class to it and stylize it. But first I need to select it, right?
Simplest solution using core jQuery functions:
$('img').nextUntil('img').doSomething();
Jonathan Snook pointed me to the jQuery 1.4 function that solves this:
nextUntil()
Check out it's sibling functions:
prevUntil
parentsUntil
Inspired by:
nextAll
prevAll
For other reference check this one :How to select all content between two tags in jQuery
<div>
some text
<img />
<br>
<span>text I want to select <span>
<br>
<img />
some text
</div>
add tag for this and get "div span" . If have more span in "div" . add id or class for them.
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have a small group of items as shown below.
<div class="item">
<div class="date">2013-08-08</div>
<div class="headline"><a data="normal" href="#">Title</a></div>
</div>
<div class="item">
<div class="date">2013-10-08</div>
<div class="headline"><a data="special" href="#">Title</a></div>
</div>
If the title has a data attribute of special, I want to make the date bold for that item only.
I have the below code to try and do this.
<script>
if ($(".headline a [data='special']")){
$( ".date" ).wrap( "<b></b>" );
}
</script>
However this makes all items bold if the condition is true.
I am familiar with using this in JS but not sure how to relate it to another div above.
What is the best way to do this?
I am happy to change the html structure if required as well.
Try the following:
$(".headline a[data='special']").parent().siblings(".date").wrap("<b></b>");
The parent() function will select the div.headline for a matching <a> tag; then, siblings(".date") will select children of the parent of div.headline (which are called siblings) that have the date class.
It sounds like you'd like to select the .date element in .item elements which contain .headline a[data="special"] elements.
$('.item:has(.headline a[data="special"]) .date')
will select the correct .date elements for my given assumptions, you can then call .wrap('<b></b>').
Also note: [data] is not a valid [data-*] attribute. You must have a hyphen and a name for custom data attributes.
I have a bunch of child elements that are uniquely identified within a parent div. I want to know if there's a way in jQuery (or javascript) to capture all of them? The number of children in the parent div is arbitrary, meaning it could be any number for each div. For example:
<div class="parent1">
<span class="child1">some text here</span>
<span class="child2">some other text</span>
...
<span class="child49">yet more text</span>
<span class="something_else">other text i don't want to select</span>
</div>
<div class="parent2">
<span class="child1">some text</span>
<span class="child2">some text</span>
...
<span class="child120">some text</span>
</div>
So considering the above example, how do I get ALL the children (.child1 through .child49) within the class parent1?
I know that doing the following will work in jQuery (using multiple selector):
$(".child1, .child2, ..., .child49").css("background","red");
But is there a better way? I won't always know how many children are in each parent.
EDIT: also, I might have other children in the parent with a different class name that I DO NOT want to select; I specifically want to select all the "child*" classes.
$('.parent1 span[class^="child"]')
will select all the spans that start with the class child under the class .parent1.
If you want all the span.childX under all parentX then use:
$('div[class^="parent"] span[class^="child"]')
This is using a CSS3 attribute selector which jQuery have implemented (and extended in some cases). From the documentation:
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
These codes gets all child in div.parent1 and div.parent2
$('[class^="parent"] span').css({ });
$('[class^="parent"]').children().css({ });
Thess codes gets onli the children for parent 1
$('.parent1 span').css...
$('.parent1').children().css...
use .children along with .filter, if number of children are not certain then label all childs which you want to manipulate of parent1 as child1
$(".parent1").children().filter(".child1").css({color:'Red'});
here is the fiddle http://jsfiddle.net/8hUqV/1/
jquery children
I'm trying to select the text from the name attribute of the anchor element of the last Comment div in the Comments div (i.e. comment_3037) How can I select it?
Here's my html:
<div id="Comments">
<div class="Comment"><!-- last "Comment" element in the div -->
<a name="comment_3037"></a>
<img src="">
<div>
<div class="Stats">Some info goes here</div>
<div class="Body">Comment goes here.</div>
</div>
</div>
</div>
Corrected Version
(dojo.query always returns a nodelist)
This would look something like that:
var nodelist = dojo.query('#Comments > .Comment:last-child > a[name]);'
var value = dojo.attr(nodelist.at(0), 'name');
Explanation: #Comments > .Comment selects all nodes with class Comment inside the node with id Comments. :lastChild reduces this selection to the last child. > a[name] selects all immidiate children of type a with the attribute name.
The second line just gets the value from the name attribute of the node.
You should get the correct element with that, but I haven't tested it.
Have a look at the dojo reference, there are tons of useful functions.
(I don't work at dojo, I just really like it ;) )
Info
http://docs.dojocampus.org/dojo/query
EDIT
To make sure that you get only the node you want (if you add another link with a name attr), you could add a class "thisisthelinkiwant" (or similar ;) ) to the appropiate link and updating the query to 'Comments .thisisthelinkiwant:last-child'.
You might consider reading about css selectors, as they are quite important with this function.