How can I select element in this HTML using jquery selectors.
<div class = 'divOne">
</div>
<div class = 'divTwo">
<h3>Title</h3>
</div>
$('.divOne').siblings('.divTwo').children('h3')
$(".divOne") to perform jquery functions on first div
$(".divTwo") to perform jquery functions on second div
$("h3") to perform jquery functions on header element
It's pretty simple to select the h3 element.
But you have to fix your HTML first. While, when writing HTML5, in general it's possible to use single-quotes. But, you have to use them at the start and the end of the value like this: <div class='divOne' /> or <div class="divOne" />
$('.divTwo > h3').css('border', '1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
<h3>Title</h3>
</div>
You could use the jQuery selector and select h3 with $('h3'). But maybe you have more than one h3-tags in your code.
In that case you could give the h3 a class and select the class with the selector.
Example:
<div class = "divOne">
</div>
<div class = "divTwo">
<h3>Title</h3>
</div>
In this case use: $('h3');
OR
<div class = "divOne">
</div>
<div class = "divTwo">
<h3 class="myClass">Title</h3>
</div>
And in this case you use $('.myClass');
-----------
In the above I explained how you could select an h3-tag, but it does work with all elements ofcourse ;)
I also noticed that you use single quotes and double quotes in your HTML ('divOne")
Do not use both for a single attribute. Just "divOne" or 'divOne'.
Related
I am trying to create a on-click function for each button, hence i need a way to select each one individually without using ids
<div class="col">
<div>
<b>Name:</b> <span>John</span> <button>change</button>
</div>
<div>
<b>Surname:</b> <span>Doe</span> <button>change</button>
</div>
<div>
<b>Email:</b> <span>doe#gmail.com</span> <button>change</button>
</div>
<div>
<b>Birth date:</b> <span>13 May 1947</span> <button>change</button>
</div>
</div>
You have a lot of selector that you can use if you don't want to use class or ids, even though I highly suggest you to use them whenever possible for the sake of comprehensibility.
Here, you could use the :nth-of-type(selector) like this.
// Select the first button of your page.
document.querySelector('button:nth-of-type(1)');
// Select the first button of your .col
document.querySelector('.col button:nth-of-type(1)');
Here is a list of selectors you can use
div b ~ button
div button
.col div button
You can try the selectors here: http://try.jsoup.org/~91Zdheyo7rX9PpORdECPjMxb890
I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?
Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");
ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements
Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!
I have this HTML structure:
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-16_thumb.jpg">
<img src="/contentthumbs/news-17_thumb.jpg">
<img src="/contentthumbs/news-18_thumb.jpg">
<img src="/contentthumbs/news-19_thumb.jpg">
</div>
</div>
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-20_thumb.jpg">
<img src="/contentthumbs/news-21_thumb.jpg">
<img src="/contentthumbs/news-22_thumb.jpg">
<img src="/contentthumbs/news-23_thumb.jpg">
</div>
</div>
I am trying to apply a CSS class to only the first hyperlinks of each lot of parent divs through JQuery:
$('.mainText a:first').addClass('mainPhoto');
But it only adds the class to the first hyperlink of the first div group. I need that all the first hyperlinks of each <div class="mainText"> get the class, in this example:
<a href="news-16.jpg">
<a href="news-20.jpg">
Thanks in advance
Why jQuery? use pure CSS:
.mainText a:first-child {
<your properties>
}
About your jQuery error:
you have used :first that is not a CSS selector but a jQuery selector, that matches only the first matching element.
You should instead use :first-child that is a CSS selector and will select each first-children matched.
Use first-child Selector, it selects all elements that are the first child of their parent. While :first matches only a single element
$('.mainText a:first-child').addClass('mainPhoto');
DEMO
In case of you want to do it with only javascript, then use this code.
var allDivs = document.getElementsByClassName("mainText");
for(var i=0; i<allDivs.length; i++){
//firstElementChild referes the first element of div
allDivs[i].firstElementChild.className = 'mainPhoto';
}
Demo you can on http://jsfiddle.net/7DS5F/19/
How can I select all following elements from my selector, stopping when the next element is not part of it and ignoring the further elements?
example:
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
now in js / jquery:
$('.primary').click(function()
{
$(this).... //acces to all following elements with class "sub"
});
so when clicking on the first primary div, I can affect the 3 following "sub" divs
I know I could do some kind of .next() in a while, but this seams inefficient.
Use .nextUntil()
$('.primary').click(function(){
$(this).nextUntil('.primary').text($(this).text())
});
Demo: Fiddle
This will Helpful to you
**SEE DEMO http://jsfiddle.net/dhaval17/W3Jsy/**
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );