HTML
<div class="a">1
<input type="button" value="send" class="b">
</div>
<div class="a">2
<input type="button" value="send" class="b">
</div>
jQuery
$(".b").click(function () {
var b=$(".a").text();
alert(b);
});
On pressing first button I want only 1 and on pressing second button I want only 2
http://jsfiddle.net/4n6ou0ka/1/
$(".b").click(function () {
alert($(this).parent().text());
// or
alert($(this).closest('.a').text());
});
Use this.parent
$(".b").click(function () {
var b=$(this).parent().text();
alert(b);
});
http://jsfiddle.net/4n6ou0ka/3/
What you need to do is to use the this keyword as a search reference so you can get only this's parent with the "a" class.
Check this modified version of your sample: http://jsfiddle.net/6qhun7hz/
All-in-one !
$(this).parent().text();
Or
$(this.parentNode).text();
Or
$(this).closest('.a').text();
Or
this.parentNode.firstChild.textContent
Related
I'm trying to Use a combination of JS and Jquery here to select the input text (a few elements previous), when the button is clicked.
I know how to do this just using JS but i want to understand how to do this using jQuery. I get the error message in console: TypeError: ele.setSelectionRange is not a function. Which I take it means that it is not defining the Input Value the way I need it to.
I'm not using ID or Class here to identify the input.
Can someone help me here? Thanks
JS
$(document).ready(function () {
$('.jimmy').click(function(e){
e.preventDefault;
jimsFunction(this);
});
});
function jimsFunction(input) {
let ele = $(input).parent().siblings(':first-child').children();
ele.select();
ele.setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele.value);
alert("Copied: " + ele.value);
}
HTML
<div class="colbody">
<div>
<input type="text" value="www.brave.com" readonly>
</div>
<div>
View
</div>
<div>
<button type="button" class="jimmy">Copy URL</button>
</div>
</div>
setSelectionRange(0, 99999) is not a method on jQuery object. Use it on DOM element.
So try: [0]
Example:
$('.jimmy').click(function(e) {
e.preventDefault;
jimsFunction(this);
});
function jimsFunction(input) {
let ele = $(input).parent().siblings(':first-child').children();
ele[0].select();
ele[0].setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele[0].value);
alert("Copied: " + ele[0].value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colbody">
<div>
<input type="text" value="www.brave.com" readonly>
</div>
<div>
View
</div>
<div>
<button type="button" class="jimmy">Copy URL</button>
</div>
</div>
I have a form and in my form there is a plus button for adding a div and at last I will send a list of that div to my controller.
$(“#addDiv”).click(function() {
$(“#myForm div# section_0).clone().appendTo(“#myForm”);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id=“myForm”>
<div id=“section_0”>
//some tags here
</div>
<button id=“addDiv” class=“btn btn-primary”>add</add>
</form>
There is not any problem in copying that div but I need to append a new id for that div and be increased by one.
If anyone can help I would appreciate
Set a global variable globalSectionId to increment at each click and replace the attribute id each time you clone()
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
});
I made a JSFiddle working: https://jsfiddle.net/4efkhdba/
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
console.log('the new id:'+globalSectionId)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myForm">
<div id="section_0">
CLONE DIV!
</div>
<button type="button" id="addDiv" class="btn btn-primary">add</add>
</div>
You better create a div with id boilerplate and then use it for cloning. Once you append the clone then iterate through the whole div list and add the id's.
<div id="boilerplate" class="tag">
// some tags here
<div>
$("#addDiv").on("click", function() {
$("div#boilerplate").clone().appendTo("#myForm");
$("#myForm").find("div.tag").each(function(i) {
$(this).attr("id", "section_" + i);
});
});
Try this.
Here I have declared one variable which helps us to update id dynamically.
var id=1;
$("#addDiv").click(function() {
var $div=$("#myForm div:last")
var klon=$div.clone().prop('id','section_'+id++);
$div.after(klon);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div id="section_0">
//some tags here
</div>
</form>
<button id="addDiv" class="btn btn-primary">add</button>
You can try this code here:
Not needed any loop just use document find item length because item length is given integer number and our id start at 0. so when item one then it returns 1 and we create new item id with last change one (1).
$("#addDiv").on('click',function(e){
e.preventDefault();
$('#section_0').append('<div id="section_'+$(document).find('.item').length+'" class="item"> Section '+$(document).find('.item').length+'</div>');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="item" id="section_0">
//some tags here
</div>
<button id="addDiv" class="btn btn-primary">add</div>
</form>
==== Thanks ====
I would like to show the value "1,000 below" found inside the button on this div using jquery
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I got this so far but not working, it shows the class ".1000"
var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);
for clarity, I want the value of the button to be on the
so that it shows like this;
<div class="showvaluehere">1,000 below</div>
Thanks
You are getting value of data-filter attribute, which is .1000
Try this
$('.button').click(function() {
var syo = $(this).text();
$('.showvaluehere').html(syo);
})
Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.
That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button, like this:
$('.showvaluehere').text(function() {
return $(this).next('button').text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
$('.button').click(function() {
$('.showvaluehere').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...
$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>
Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>
this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button
http://www.frostjedi.com/terra/scripts/demo/jquery01.html
Clicking the button on that page should unhide the "hello, world!" div tag shouldn't it? When I click it I get a $("#demo").style is undefined error.
$("#button").click(function () {
$("#div").hide();
});
$("#button").click(function () {
$("#div").show(2000);
});
Try this , the simplest one ..
<input type="button" onclick="$('#demo').toggle()" value="clicking me should unhide a div tag">
You should use
$('#demo').show(); // to display
or
$('#demo').hide(); // to hide the div
try .show()
$("#demo").show()
You cannot access properties of jQuery objects by . (dot) (They are not javascript objects)
You this,
$('#demo').css({'display':'none'})
Or you can use $('#demo').hide(); (Its a shortcut)
jQuery.hide() is very slow.
Use the following instead:
document.getElementById('demo').style.display = 'none'
This is where you heard of the style property. This property works on DOM objects. jQuery objects are not DOM objects.
Use the hide() method
$("#demo").hide()
or
$("#demo").hide()
or even the toggle() method to toggle visibility:
$("#demo").toggle()
Integrated in your example:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div>
<input type="button" onclick="javascript:$('#demo').show();" value="clicking me should unhide a div tag">
</div>
<div id="demo" style="display: none">hello, world!</div>
</body>
</html>
Example from jQuery documentation:
<h1 class="firstHeading" style="display: block;">Tutorials:Basic Show and Hide</h1>
<div class="examples">
<input id="hideh1" type="submit" value="Hide site tile" name="hideh1">
<input id="showh1" type="submit" value="Show site title" name="showh1">
<input id="toggleh1" type="submit" value="Toggle site title" name="toggleh1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.showhide,h1').hide();
});
$('#showh1').click(function () {
$('div.showhide,h1').show();
});
$('#toggleh1').click(function () {
$('div.showhide,h1').toggle();
});
});
});
</script>
$("#demo").style is not a jQuery function
You should either use $("#demo").css("display","block") property or use show() or toggle() functions
Do
$(document).ready(function() {
$("input[type='button']").click(function() {
$("#demo").show();
});
});
or
document.getElementById("demo").style.display = "block";