A simple example is confusing me about selector in jQuery.
I have this html code:
<div class="container">
<h1>Welcome to my Website </h1>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
if I want to highlight the second paragrah I think that this is the right way:
$('p:nth-child(2)').css("background-color","yellow");
But this is not correct, in fact the First paragraph will be highlighted, even if I have only two <p> section and I'm putting the value 2 inside the nth-child() function.
Here the related jsfiddle
If I remove the <h1> element, the second paragraph will be highlighted. So, it seems as if the <h1> element is treated as <p> element by jQuery selector.
However the code:
$('p:nth-child(1)').css("background-color","yellow");
will not highlight anything. Why this happens?
nth-child means literally "child in place n", what you're searching is nth-of-type , have a look: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
So this will work as you expect:
$('p:nth-of-type(2)').css("background-color","yellow");
JSFiddle: http://jsfiddle.net/t2rn7/
:nth-child is with respect to the parent, so in your first example that <p> is in fact the 2nd child. If you want it to be the second p, you should use :nth-of-type
Related
When you press button it calls randomQuote() function using onClick method in html. It works fine , changes the background color and the text of quotes[rand] also works. But there is no change in by id element. Also, it is not a array problem because if i type the same by statement outside the randomQuote(), it works fine.
Here is the code:
function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length));
$("#qu").html(quotes[rand]);
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000);
};
(Go to https://codepen.io/TheCoder21/pen/XVVxvo) for full code
The issue in your markup:
<div class="quote">
<blockquote id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p id="by">
random text
</p>
</blockquote>
</div>
container with id="by" overwrites by this jquery method $("#qu").html(quotes[rand]);
If you want to prevent this behaviour just wrap your text in new paragraph with id="qu":
<blockquote>
<p id="by">
Here are some of my favourite quotes.Hope you enjoy them!
</p>
<p id="by">
random text
</p>
</blockquote>
The problem is that your by element belongs inside blockguote i.e id=qu element when you did $("#qu").html(quotes[rand]);
It's html structure got changes. you no longer have a by element.
Therefore, when you try to $("#by").html(by[rand]); nothing happens. Because no by element was found.
Solution: move your by element outside the blockquote
Working code: https://codepen.io/anon/pen/MrLodd
You have to separate the id in two paragraphs inside the blockquote. You can't give the blockquote and id and then expect the paragraph tag to also pick up an id inside of it. The blockquote overrides it.
<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p>
<p id="by">
random text
</p>
</blockquote>
I am trying to use AngularJS to grab the element by tag name.
For example,
angular.element(document.querySelector('h1')).css('color', 'green');
element in HTML:
<div>
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
It works only for the first element but not the second one. I am not sure the reason for it. Can anyone help me about it? Thanks a lot!
As #Tushar mentioned, the best way to handle this is with ng-class. Let Angular do the DOM manipulation for you
Your CSS
.someclass{
color: green
}
Your HTML
<div ng-class="{'someclass': obj.value == 'somevalue'}">
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
After 'someclass', in your controller, you can insert whatever expression makes the most sense. When your expression evaluates to true, the 'someclass' will be applied to your Div.
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
<body>
<div>
<p>This is <strong>first</strong> paragraph</p>
<p>And this one is second</p>
<span><h2>I am p inside span</h2></span>
<h1>I am h1</h1>
</div>
<div name="divName">
<p>This is a paragraph in second div</p>
</div>
</body>
The following code gives me:
Error: Syntax error, unrecognized expression: a[#href]
//Another file
$(document).ready(function() {
$("div[p]").css("background-color", "green");
$("a[#href]").css("background-color", "yellow");
});
Also the $("div[p]").css("background-color", "green"); seems to be doing nothing.
What's going on here?
According to http://www.tutorialspoint.com/jquery/jquery-selectors.htm these should be valid.
It's not clear what version of jquery the 'tutorialspoint' is using, but, assuming your referring to number 17:
$("div[p]")
Selects all elements matched by that contain an element matched by <p>
This is either simply wrong or very out-dated (Edit: looks like it's about 10 years out of date... see edit below).
There are also many questions on SO that ask how to achieve exactly this and none of them give this answer.
The page you should be referring to is:
https://api.jquery.com/category/selectors/
Which shows that [] is used to match attributes, eg:
<p data-id='123'>
$("p[data-id]")
will match all p that have attribute data-id (regardless of value in this case).
Edit: To address the specific question in the title "unrecognised expresion a[#href]" - see this question: What does the "#" sign in jQuery selector means? the answer for which states that this was obsolete "2 versions ago" in 2010
So I'm guessing your tutorial page is about 10 years out of date
<div>
<p>This is <strong>first</strong> paragraph</p>
<p>And this one is second</p>
<span><h2>I am p inside span</h2></span>
<h1>I am h1</h1>
</div>
<div name="divName">
<p>This is a paragraph in second div</p>
</div>
JS
//Another file
$(document).ready(function() {
$("div p").css("background-color", "green");
$("a[href]").css("background-color", "yellow");
});
http://jsfiddle.net/leojavier/kkj5c267/1/
I tried to wrap the following element with div container, if it is not wrap up with.
<p class="fileDetails"><div class="filename">text goes here</div><div class="fileSize">text goes here</div></p>
How to fix this?
You can't put <div> elements inside of <p>s. (Down to the specs -- see also Putting <div> inside <p> is adding an extra <p> ) if you're interested.
So you'll have to switch to a <span> that's styled the way you want, or probably semantically an unordered list makes more sense.
Here's a fiddle showing how it could work.
Working Example: http://jsfiddle.net/ef43tgto/
You should make .filename and .fileSize <p> tags and the .fileDetails a <div>. Then you can use jQuery .wrap()
<div class="fileDetails">
<p class="filename">text goes here</p>
<p class="fileSize">text goes here</p>
</div>
if ( !$('.container').length ) {
$('.fileDetails').wrap('<div class="container" />')
}
I have HTML that looks like this
<div id="1053906-cdm-contract-with-city-of-new-orleans-2013-fema" class="contract-container">
<p class="contract-title contract">CDM- Contract with City of New Orleans: 2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>
<p class="contract-description contract">2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>
<div class="mention-text contract"><div class="page">Page 1</div> sometext </div> <br><br>
<div class="mention-text contract"><div class="page">Page 16</div> some text</div> <br><br>
</div>
When a user clicks anywhere in the outer-most div, I want to find the closest "page". I use this jquery
firsthtml = $(this).closest(".page").html();
This returns "undefined" for firsthtml
If I get rid of the .html() and hover over the firsthtml var -- I see that it returns the HTML for the entire div. In other words it returns multiple divs with class="page".
Why isn't it pulling only the first class with "page"?
So there's a difference between .closest() and .find() and what you're trying to do.
http://api.jquery.com/closest/
closest and find navigate up and down the DOM tree. If you wanted to get the HTML of .page you would have to say something like
$(this).find('.page').html();
Since `.page' is almost the last element in your div structure.
If you're looking to get the HTML of the FIRST .page element, that is different. You'd have to say something like:
$('.page').eq(0).html()
.eq() is another way of saying .index() but it will select whichever element you want. If you want to select that page inside that specific div, you could possibly do
$(this).find('.page').eq(0).html();