I know this question is so familiar in stackoverflow, but still I can't find my solution. I want to get my child div's value when I click the parent div, but my current code gives me "undefined". My html is given below:
<div class="main">
<div class="testId">
1
</div>
<div class="testName">
test
</div>
<div class="testDob">
10/10/10
</div>
</div>
and my script is given below
var id = $(this).child(".testId").innerHTML;
any thoughts?
Try using find():
var id = $(this).find(".testId").text();
"find" finds the elements just inside the div.main
var id = $(this).find(".testId").html();
console.log(id);
Use .children() no selector .child()
var id = $(this).children(".testId")[0].innerHTML;
or
var id = $(this).children(".testId").text();
or
var id = $(this).children(".testId").eq(0).text();
I think this one should works
$('.main').click(function(){
var value = $(this).child(".testId").text();
})
here is a working exmaple
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="main">
<div class="testId">
1
</div>
<div class="testName">
test
</div>
<div class="testDob">
10/10/10
</div>
</div>
<script>
$(".main").click(function () {
var id = $(this).children(".testId").html();
alert(id)
})
</script>
</body>
</html>
Related
I'm trying to remove the text in the div element when clicked if the text is "Text".
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<body>
<div class="txtField" onclick="emptyField()">
<p>Text</p>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
function emptyField() {
var textVar = document.getElementById("txtField");
if (textVar.textContent === "Text")
{
textVar.textContent = "";
}
}
Thank you.
It's easier just to pass a reference to the element, and when you're comparing strings against element text, make sure to trim() it first.
function emptyField(el) {
if (el.textContent.trim() === "Text") el.textContent = "";
}
<div class="txtField" onclick="emptyField(this)" contenteditable="true">
<p>Text</p>
</div>
First of all you have lots of syntax errors my friend :) As listed below:
var textV = document.getElementById("txtField"); // issue here
You have named textV while you are using textVar. Also you are using document.getElementById("txtField") while you have no id attribute in your div, you have class instead in your HTML.
<div class="txtField" onclick="emptyField()" contenteditable="true">
So, fix these errors first.
function emptyField() {
var textV = document.getElementById("txtField"); // Issue here
if (textVar.textContent === "Text") // using textVar
{
textVar.textContent = "";
}
}
THEN USE THIS CODE AND THIS WILL WORK AS EXPECTED:
const div = document.querySelector(".txtField");
div.addEventListener("click",emptyField);
function emptyField() {
var textV = document.querySelector(".txtField p");
if (textV.innerText === "Text")
{
textV.innerText = "";
}
}
<html lang="en">
<meta charset="utf-8"/>
<body>
<div class="txtField" contenteditable="true">
<p>Text</p>
</div>
<script src="script.js"></script>
</body>
</html>
And no it is not because you have your div as contenteditable
I try get id parent p div (class mainRow), but my code in console return undefinied:
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
var a = $(element).parent( ".mainRow");
var b = $(a).attr("id");
console.log(b);
}
</script>
Link to jsfiddle: https://jsfiddle.net/50ev1jzq/
Since the .mainRow is not a parent of the paragraph, use .closest:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>parent demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
debugger
var a = $(element).closest( ".mainRow" );
var b = $(a).attr("id");
console.log(b);
}
</script>
</body>
</html>
You could use parents(), because according to the docs:
Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
This method is similar to .parents(), except .parent() only travels a single level up the DOM tree.
As others have pointed out, closest() could also work. There are some differences tough:
I find sollution, i change .parent to .closest and code work
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
var a = $(element).closest( ".mainRow");
var b = $(a).attr("id");
console.log(b);
}
</script>
var resultsList = $("#test");
resultsList.text("Hello. This is jQuery!");
var tB = jQuery("#toggleButton");
tB.on("click", function() {
resultsList.toggle(400);
});
I believe the syntax is correct because the browser console is not reporting any error.
On loading the page, the toggle is not working as expected. Any idea, what am I missing here?
My HTML is :
<div id="results" class="bordered-image">
<button id="#toggleButton">Hide</button>
<div id="test">This is where results will live...eventually.</div>
</div>
Put the Jquery code into document.ready() like this: Check the Fiddle also.
$(document).ready(function(){
var resultsList = $("#test");
resultsList.text("Hello. This is jQuery!");
var tB = jQuery("#toggleButton");
tB.on("click", function() {
resultsList.toggle(400);
});
});
Your id attribute should be id="toggleButton" instead of id="#toggleButton"
HTML:
<div id="results" class="bordered-image">
<button id="toggleButton">Hide</button>
<div id="test">This is where results will live...eventually.</div>
</div>
id="toggleButton" instead of id="#toggleButton" will do.
Wrap it inside the document ready function.
see this example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="results" class="bordered-image">
<button id="toggleButton">Hide</button>
<div id="test">This is where results will live...eventually.</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var resultsList = $("#test");
resultsList.text("Hello. This is jQuery!");
$("#toggleButton").click(function() {
resultsList.toggle(400);
});
});
</script>
</html>
Thanks
Amit
<div id="results" class="bordered-image">
<button id="#toggleButton" onclick="myff();">Hide</button>
<div id="test">This is where results will live...eventually.</div>
</div>
<script>
function myff(){
$("#test").toggle();
}
</script>
I just started using jQuery, then forgive me for noobish.
What I'm trying to do is 'get reference to a object that is wrapped in a class', but there are more classes with same name.
How can I reach the right object and get the reference to it, when the only thing that will differ it from a thousand other more objects is the text inside the div.
In this case, I'm trying to show only the text "this should be returned", that is under the classes 'ng-anyclass'.
After that, will be possible store the reference to that specific div and change it text? Or any other properties?
Here's the code:
Page 1 - the loader:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var s = $('#result').load('Page2.html .ng-anyclass .ng-anyclass .ng-anyclass');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>
Page 2 - the target page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="ng-anyclass">
<div class="ng-anyclass">
<div class="ng-anyclass">this should be returned</div>
</div>
<div class="ng-anyclass">
<div class="ng-anyclass">not this</div>
</div>
</div>
</body>
</html>
You can use :eq(0) for this:
jQuery(function($) {
$('#result').load('page2.html .ng-anyclass .ng-anyclass .ng-anyclass:eq(0)', function(){
var _this = $(this)
setTimeout(function(){
_this.find('.ng-anyclass').text('changed');
},1000);
});
});
updated plnkr Demo.
If you want to write text somewhere you can use CSS selector, like this :
$('body .ng-anyclass .ng-anyclass:eq(0) .ng-anyclass').text('your text')
eq(0) it's a shortcut of first-child, or eq(1) is nth-child(2) for example
I hope it will be help you
I have a global view model which is applied to main div
and I have some other view models and I want to apply them to nested elements of my main div
but I am getting the
You cannot apply bindings multiple times to the same element.
and here it is a sample :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="main">
<input data-bind="value:title,valueUpdate:'afterkeyup'" />
<h1 data-bind="text:title"></h1>
<hr />
<div id="sub">
<input data-bind="value:name,valueUpdate:'afterkeyup'" />
<label data-bind="text:name"></label>
<!-- a reference to title in globalViewModel -->
<h1 data-bind="text:title"></h1>
</div>
</div>
<script src="Scripts/knockout-3.2.0.js"></script>
<script>
var globalViewModel = {
title : ko.observable("global title")
}
var subViewModel = {
name : ko.observable("Test")
}
ko.applyBindings(globalViewModel);
ko.applyBindings(subViewModel, document.getElementById('sub'));
</script>
</body>
</html>
Please guide me with your brilliant solutions :)
Need to apply binding separately for both view modal
or can just create both property in same viewModal