Please see the following code:
<div id="song" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s2">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s3">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
There are several more s like these. I've to get the link from the first <div> whose ID is song only using JavaScript because I've fetched this data using php into an <object> tag.
Thank you :)
You should use JQuery like (at the bottom of your file):
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var links = $.map($('div#song .link a'), function(a) { return $(a).attr('href'); });
console.log(links);
</script>
Output:
["some url", "some url", "some url"]
Noting only the first set,
<div id="song1" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div>
<div>foo</div>
<div class="link">Link</div>
</div>
You can get the link which is some url by
var link = $(".s1").find("a");
console.log(link.attr('href') );
Related
Here's my code:
<div id='layer1'>
<div id='a'>
<div id='b'>
<div id='layer2'>
<div id='a'>
<div id='b'>
<div id='layer3'>
<div id='a'>
<div id='b'>
I want to try to get the element [a] of layer1.
Could I do this using pure javascript and withOUT jquery and other stuff?
An ID uniquely identifies one single element on the page. The behavior you described is more like "a class" inside of an ID:
document.querySelector("#counter-for-drinks .up-arrow")
and so if you want a different up-arrow, it is:
document.querySelector("#counter-for-burgers .up-arrow")
document.querySelector() is what is similar to jQuery $(" "). It also has the form document.querySelectorAll() for getting all matched elements.
Your HTML is missing closing tags. You can always validate your code here.
Also, you should use class instead of id.
<div id='layer1'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer2'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer3'>
<div class='a'></div>
<div class='b'></div>
</div>
You can use javascript to get elements:
document.querySelector("#layer1 .a")
var firstA = document.querySelectorAll('#layer1 #a');
var nodeString = '';
if (firstA.length > 0) {
for (var i = 0; i < firstA.length; i++) {
nodeString = nodeString + firstA[i].innerText + '<br/>';
}
}
document.getElementById('founded-nodes').innerHTML = nodeString;
#founded-nodes {
color: brown;
}
<div id='layer1'>
<div id='a'>layer1 aaa</div>
<div id='b'>layer1 bbb</div>
</div>
<div id='layer2'>
<div id='a'>layer2 aaa</div>
<div id='b'>layer2 bbb</div>
</div>
<div id='layer3'>
<div id='a'>layer3 aaa</div>
<div id='b'>layer3 bbb</div>
</div>
<div id="founded-nodes"></div>
As all said in above over comments and answers, one must use a single id on the same page, or else the use of classes is a must. But if you want to achieve this, you can have a look at code.
{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?
If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>
I want to show all the nodes of my html page inside a div.
What i have so far (js):
var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;
And html:
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
The output I get from this code in div3: [object HTMLCollection]
How do I get all the nodes to show like:
BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT
So every node in the file basically
You have to loop through all the nodes so that you get the nodeName property individually.
Please Note: Since document object has some other tags like HTML, HEAD, STLYLE, SCRIPT etc., all of them will be targeted with * selector.
var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
div3.innerHTML += el.nodeName + ' ';
})
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
You can use JavaScript querySelectorAll method, which is used to select all the nodes based on the parameter we passed. for example if we pass * inside document.querySelectorAll('*'), it selects all the node in the document. "*" is the universal selector.
var allNode=document.querySelectorAll('*')
console.log(allNode)
<body>
<div id="content">
<div>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
Use element_name.querySelectorAll('*') to get all elements inside it.
var b=document.getElementById('div3')
document.querySelectorAll('*').forEach(e=>b.innerHTML+=e.nodeName + "<br>")
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
When click on click here it's still alert 0.
How can i count length div by id using javascript ?
function swipeDislike() {
var $photo = $("div.content").find('#photo');
alert($photo.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div onclick="swipeDislike()">
click here
</div>
<div id="content">
<div id="photo">
DIV content photo
</div>
</div>
Your selector is id not class.
Change var $photo = $("div.content").find('#photo');
To
var $photo = $("div#content").find('#photo');
Working Code Snippet:
function swipeDislike() {
var $photo = $("div#content").find('#photo');
alert($photo.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div onclick="swipeDislike()">
click here
</div>
<div id="content">
<div id="photo">
DIV content photo
</div>
</div>
You have a typo instead of div.content use div#content
$("div#content").find('#photo') instead of $("div.content").find('#photo')
But the best way would be to just use $(“div#content #photo”); this way you won't need to use two expensive jQuery calls. Thanks Jaromanda X :)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div onclick="swipeDislike()">
click here
</div>
<div id="content">
<div id="photo">
DIV content photo
</div>
</div>
<script>
function swipeDislike() {
var $photo = $("div#content #photo");
alert($photo.length);
}
</script>
I have a little problem. I want to change my page title when I click on 1 of 5 tabs that I have on my page. The title of that page should change based on what tab was clicked. If would go something like this:
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
When clicked on tab1, title should change to "tab1, when clicked on tab2, title should change to tab2 and so on...
I tried with this jquery, but it didn't work. :)
<script type="text/javascript">
$(document).ready(function (){
('#tab2').click(function ()}{
(document).title ('tab2');
})
});
Can you please help me with that?
Thank you....
Try this
<div class="change-title" id="tab1">1</div>
<div class="change-title" id="tab2">2</div>
<div class="change-title" id="tab3">3</div>
<div class="change-title" id="tab4">4</div>
<div class="change-title" id="tab5">5</div>
<script>
$(document).ready(function() {
$('.change-title').on('click',function(){
document.title = $(this).attr('id');
});
});
</script>
An elegant solution could also be if you would make use of the data() method in jQuery. Then you could simply define your preferred title for each tab that should be displayed in the title tag and it's not bounded anymore to the name of your id.
HTML
<div id="tab1" data-title="Tab 1"></div>
<div id="tab2" data-title="Tab 2"></div>
<div id="tab3" data-title="Tab 3"></div>
<div id="tab4" data-title="Tab 4"></div>
<div id="tab5" data-title="Tab 5"></div>
jQuery
$("div").click(function(){
document.title = $(this).data("title");
});
Pure Js I can give you short version also
function changeTitle(pagetitle){
document.title = pagetitle;
}
document.getElementById('tab1').onclick = function(){changeTitle("tab1")};
document.getElementById('tab2').onclick = function(){changeTitle("tab2")};
document.getElementById('tab3').onclick = function(){changeTitle("tab3")};
document.getElementById('tab4').onclick = function(){changeTitle("tab4")};
document.getElementById('tab5').onclick = function(){changeTitle("tab5")};
<div id="tab1">A</div>
<div id="tab2">B</div>
<div id="tab3">C</div>
<div id="tab4">D</div>
<div id="tab5">E</div>