let say i have this div
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
I wanted to give the #button an on click event that returned the text at #lookAtMe div, specific to the div whom it shares parent/grandparent (in this case, the #parent div)
I tried using:
$("#button").on("click",function(){
var ReturnedText = $(this).parent(".lookAtMe").text();
console.log(RetrunedText);
});
But the console log would retruned (empty string).
Where did i do wrong? please help. Thankyou very much.
Because there is n o parent with that class. You need find().
Actually you need to write
var ReturnedText = $(this).parent().find(".lookAtMe").text();
$("#button").on("click",function(){
var ReturnedText = $(this).parent().find(".lookAtMe").text();
console.log(ReturnedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
Related
I'm writing a HTML code where there are 3 divs - and in the mainDiv2, there is this another div that is hidden. When I click on the mainDiv2, I want to unhide the hiddenDiv(this I'm able to do it). As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
Here is my code.
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
JS
function showhiddenDiv(){
document.getElementById('hiddenDiv').style.display="block";
}
please let me know how can I do this.
Here is a working fiddle. https://jsfiddle.net/8pj3uvfn/1/
Thanks
You can use appendChild like below
function showhiddenDiv() {
var hiddenDiv = document.getElementById('hiddenDiv');
var mainDiv1 = document.getElementsByClassName('mainDiv1')[0];
hiddenDiv.style.display = "block"
mainDiv1.appendChild(hiddenDiv)
}
<div class="mainDiv1" id="mainDiv1">
This is a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
You need to clone the hiddenDiv and put it in mainDiv1.
So modify your method as
function showhiddenDiv(){
var hiddenNode = document.getElementById('hiddenDiv');
hiddenNode.style.display="block";
var copyHiddenNode = hiddenNode.cloneNode( true );
copyHiddenNode.id += "_1"; //change the id so that ids are not duplicated
document.getElementById("mainDiv1").appendChild( copyHiddenNode );
}
You could use appendChild
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv');
document.getElementsByClassName('mainDiv1')[0].appendChild(hiddenDiv);
hiddenDiv.style.display="block";
}
Demo
Assuming that you have set the id attributes of the divs properly,
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv'); //Get the reference
document.getElementById('mainDiv1').appendChild(hiddenDiv) //Chenge the DOM order (you don't have to clone)
hiddenDiv.style.display="block"; //Unhide
}
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="document.getElementById('hiddenDiv').style.display = 'block'">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
I have this html
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
This is the section of the modal where I need to append the text within the element with the class read-more
<div class="modal-body">
<!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>
And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:
jQuery(document).ready(function($) {
var $readmore = $('.read-more');
var $readmoreParagraph = $('.read-more p');
$readmore.each(function(i, el) {
var $dataAttr = $(el).attr('data-attr', i);
});
});
To get this output:
<div class="read-more" data-attr="0">
<p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
TL;DR:
I need to append to the modal-body the text on the <p> under the div with the class read-more.
Any suggestions?
UPDATE
I did this:
$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));
But as a result I am getting this in the modal-body:
1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL
Use the show.bs.modal event to change the contents of the body each time it is shown.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // Button that triggered the modal
content = button.siblings('.read-more').html(),
modal = $(this);
modal.find('.modal-body').html(content);
});
See http://getbootstrap.com/javascript/#modals-related-target
From what I understood after the comments, I suggest the following:
After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).
Like this (example for the id 1):
$('#myModal .modal-body').html($("[data-attr=1] > p").text());
I'm trying to retrieve the ID of one element, store it as a variable and then use that ID value to interact with other elements in that section with the same ID.
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>
And then the JS/jQuery
function readMore() {
var subID = event.target.id;
var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");
alert(newTarget.id);
}
At this point I'm only trying to display the ID of the selected element but it is returning undefined and in most cases people seem to notice that jQuery is getting confused because of the differences between DOM variables and jQuery ones.
jsfiddle: https://jsfiddle.net/dr0f2nu3/
To be completely clear, I want to be able to click on one element, retrieve the ID and then select an element in the family of that clicked element using that ID value.
just remove the getElementsByClassName("articlePara"); in end of the newTarget .already you are call the element with id alert the element of the id is same with target.id
function readMore() {
var subID = event.target.id;
var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
<div class="articleContent">
<h1>header</h1>
<p class="articlePara" id="one"></p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">click
</div>
</div>
As you have read before, you should keep your id's unique, and you should avoid using onclick in html, but you could do it like this.
With querySelector you get the element and then with parentElement you can retrieve the parent of that element.
function readMore(el) {
var articleFooterId = el.id;
var articlePara = document.querySelector(".articleContent #"+articleFooterId);
var articleContent = articlePara.parentElement;
console.log('articleFooter', articleFooterId);
console.log('articlePara', articlePara);
console.log('articleContent', articleContent);
}
In your html you can return the 'this' object back to the function by doing readMore(this).
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore(this)">footertext</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore(this)">footertext</div>
</div>
jsfiddle
if you're using Jquery:
$(function () {
$('div.articleFooter').click(function () {
var para = $(this).prev().find('p.articlePara').text();
alert('T:' + para);
});
})
$('.articleFooter').click(function() {
var b=subId; //can be any
var a="p[id="+b+"]"+"[class='articlePara']";
$(a).something;
});
You have forgotten to pass in event as parameter in your onclick= call in html.
In your javascript, you need to include event in the parenthesis as well.
window.readMore = function(event) {...}
if you write document.getElementById(subID).getElementsByClassName("articlePara"); That's saying you want to get your clicked element's CHILD elements that have class equal to articlePara . There is none. So you get undefined.
If you want to find all element with a ID one and a class articlePara, it can be done easily with jQuery:
newtarget = $("#one.articlePara");
You can insert a line: debugger; in your onclick handler function to trigger the browser's debugging tool and inspect the values of variables. Then you will know whether you are getting what you want.
Let's say I have a template and I want to loop and create div's. I want to listen to clicks on the buttons contained in each of these divs:
<div class="repeatedDiv">
<button class="reply-button">
</div>
$('.reply-button').on('click',function(e)...)
I want to make the reply button function specific to the div that it was selected on. Would it be bad to have something like:
<div class="repeatedDiv">
<button class="reply-button" id="reply-{{this.id}}">
</div>
Don't make it more complicated than it really is
$(document).on('click', '.reply-button', function(e){
var divClicked = $(e.target).closest('.repeatedDiv');
// do something with clicked div
// var divClicked is the div elmt that contains the button that was clicked
// doing it this way you might not even need an id at all
console.log(divClicked.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="repeatedDiv">
<button class="reply-button">div1</button>
</div>
<div id="div2" class="repeatedDiv">
<button class="reply-button">div2</button>
</div>
<div id="div3" class="repeatedDiv">
<button class="reply-button">div3</button>
</div>
And if you do need an id when creating a new div create it dynamically with e.g.
var newID = "id-" + Date.now();
console.log(newID);
I have following structure
<div onClick="javascript:Myfunction('value');">
<div title="Mytitle"> </div>
</div>
Can I access in the javascript Myfunction, the title of the inner div.
There are no ids here.
If you do not want to change the html code then you can use this.
function MyFunction ( elem )
{
var child = jQuery(elem).find("div");
alert ( child.attr("title") );
}
<div onclick="MyFunction(this);">
<div title="Mytitle"> </div>
</div>
Otherwise try this
$(document).ready ( function () {
$('#divMain').click(function() {
var titleElem = $(this).find("div");
alert ( titleElem.attr("title") );
});
});
<div id="divMain" style="width: 100px; height: 100px;">
<div title="Mytitle">
</div>
</div>
Depends if you use any JavascriptLibraries like jQuery. If you do, you can select your objects via CSS selectors, which would be in your case
$('div[onclick] > div[title]')
You'd get your inner DIV element with it. If there are more elments that match this criteria, you could limit them even more by attribute values.
If it's the only div with the title you can use this selector:
$('div[title]')
The easiest solution would to add a class or id to the div with onClick defined (I suggest moving onlick to JS code as well)
<div class="myClass">
<div title="MyTitle"> ... </div>
</div>
And in JS:
$('.myClass').click(function() {
MyFunction('value');
});
Then you can find inner div with
$('.myClass div')