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>
Related
Help! I use two methods to add child nodes inside the node. But the results are different! Two kinds of code are below.
first code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li")
var text1 = document.createTextNode("下一个")
li1.appendChild(text1)
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>
second code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li").appendChild(document.createTextNode("下一个"))
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>
The method appendChild returns the node that was appended, in this case it is the text node.
Then you append the text node to the ul, which removes it from being a child of the li to be a child of the ul.
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns
I have a number of divs with the same className (.example). I'm attempting to add classes to the classList of each of them using vanilla JavaScript, and successfully do so, but only for the first div of which possesses the targeted className, as shown using the following code:
<html>
<body>
<div class="example">content</div>
<div class="example">content</div>
<div class="example">content</div>
</body>
</html>
var example = document.querySelector('.example');
if (className = ('.example')){
example.classList.add('margin');
}
this does the following:
<html>
<body>
<div class="example margin">content</div>
<div class="example">content</div>
<div class="example">content</div>
</body>
</html>
However, I wish to do this:
<html>
<body>
<div class="example margin">content</div>
<div class="example margin">content</div>
<div class="example margin">content</div>
</body>
</html>
Hopefully I've provided enough information for you, thank you in advance!
You need to loop through the elements using querySelectorAll() and not querySelector() to add classes and there's no if you need to use:
// Select all the elements with example class.
var examples = document.querySelectorAll('.example');
// Loop through the elements.
for (var i = 0; i < examples.length; i++) {
// Add the class margin to the individual elements.
examples[i].classList.add('margin');
}
<div class="example">content</div>
<div class="example">content</div>
<div class="example">content</div>
The code above is well commented. Let me know if you have any questions.
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 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
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>