HTML
<div>
<a href=''> First </a>
</div>
<div>
<div>
<a href=''> Second </a>
</div>
</div>
<a href=''>Third</a>
Script
$(document).ready(function(){
$('a').click(function(){
// find next a element
//var next = $(this).next('a');
//console.log(next.text());
});
});
Fiddle: https://jsfiddle.net/usyu30t6/
I want that if i clicked on first a element, it gives me the text of next a element. And if i clicked on second a element, it gives me the next one and so on. Is it possible to do that?
You can also just store the click handlers in a variable and access them like this
$(document).ready(function () {
var allAs = $('a').click(function (e) { // <--- List of anchor tags
e.preventDefault();
var i = allAs.index(this) + 1; // <--- get next Index
alert(allAs.eq(i).text()); // <--- get next anchor tag's text
});
});
Full demo:
$(document).ready(function() {
var allAs = $('a').click(function(e) {
e.preventDefault();
var i = allAs.index(this) + 1;
alert(allAs.eq(i).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href=''> First </a>
</div>
<div>
<div>
<a href=''> Second </a>
</div>
</div>
<a href=''>Third</a>
$('a').click(function(){
var currentIndex = $('body a').index($(this))+1;
var text = $('body a:eq('+currentIndex+')').text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a href='javascript:void(0)'> First </a>
</div>
<div>
<div>
<a href='javascript:void(0)'> Second </a>
</div>
</div>
<a href='javascript:void(0)'>Third</a>
Try this -
$(document).ready(function(){
var allAnchorElements = $("a");
allAnchorElements.click(function(){
// find the index of current element
var index = allAnchorElements.index($(this));
// find the next element
var next = allAnchorElements.eq(index+1);
// text of next element
console.log(next.text());
});
});
Here is a fiddle demonstrating the idea - https://jsfiddle.net/callicoder/qpnt0rh6/
Related
I want a jquery code, please check the comment in the script.afetr click here i want code, to add inputText in li and rest the same
i don't know why posting a question is so creepy first time?
<body>
<div class="content">
<div class="main">
<input type="text" autofocus placeholder="Please write your task here....">
<button>Click To Add</button>
</div>
<div class="data">enter code here
<ul>
<li>Item aided shown here <a id="del-button" href="https://www.google.com">
<img src="del.png" alt="delete-button"> </a> </li>
</ul>
</div>
</ class="content">
<script>
$('document').ready(function () {
var cont = $('.content');
$('button').click(function () {
var inputText = $('input');
var newList = $('li').first().clone();
// now afetr click here i want code, to add inputText in li and rest the same
})
})
</script>
</body>
Try this:
$('button').click(function () {
var inputText = $('input').val();
var newList = $('<li></li>');
newList.append(inputText);
newList.append('<a id="del-button" href="https://www.google.com"><img src="del.png" alt="delete-button"> </a>');
$("ul").append(newList);
});
Also note that your HTML code is broken, before your <script> tag you have </ class="content"> instead of </div class="content">.
Working Fiddle.
I want to run a function anytime one of a series of elements are clicked and want to target these elements using a partial ID. Currently, only the first element responds when clicked upon. What have I done wrong? My code:
HTML:
<div>
<a id="selector-0">Zero</a>
</div>
<div>
<a id="selector-1">One</a>
</div>
<div>
<a id="selector-2">Two</a>
</div>
JS:
document.querySelector('[id^="selector-"]').onclick = function(){
var id_selector = this.getAttribute('id');
alert('ID: ' + id_selector);
}
I have attempted changing the querySelector to include 'a[id^="selector-"]', but only the first element ever wants to respond on click.
Use *= selector with id as attribute and document.querySelectorAll.
Then add the onclick to all the elements of the given array of retrieved elements.
const els = Array.from(document.querySelectorAll('[id*=selector-]'));
console.log(els.length);
els.forEach(el => el.onclick = () => console.log('Clicked el:', el));
<div>
<a id="selector-0">Zero</a>
</div>
<div>
<a id="selector-1">One</a>
</div>
<div>
<a id="selector-2">Two</a>
</div>
Onclick anchor tag 'CLICK ON ME' I want to change the text of p tag inside div....
<li class="class_1" id="item-1">
<a href="http://somethingxyz.com/">
<img src="http://somethingxyz.com/imaqges/image.png" class="mlt-lang">CLICK ON ME</a>
</li>
and the p tag in div element where i need to change the text is:-
<div class="footer_left">
<p>This text needs to be change.</p>
</div>
Try Below Code. And if You Use Link in Anchor tag it will redirect to the link given So you cant See the changes in the current page (though it made the changes)
<script>
function clickchange() {
var ptag = document.getElementById('par1');
ptag.innerHTML = 'Observe the Change';
}
</script>
<li class="class_1" id="item-1">
<a href="#" onclick="clickchange()">
<img src="http://somethingxyz.com/imaqges/image.png" class="mlt-lang">CLICK ON ME</a>
</li>
and the p tag in div element where i need to change the text is:-
<div class="footer_left">
<p id="par1">This text needs to be change.</p>
</div>
You can try using a jQuery as well.
$(".class_1 > a").click(function(e) {
e.preventDefault();
$(".footer_left > p").text("This is New Text"); // Or $(".footer_left > p").html("This is New Text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="class_1" id="item-1">
<a href="http://somethingxyz.com/">
<img src="http://somethingxyz.com/imaqges/image.png" class="mlt-lang">CLICK ON ME</a>
</li>
<div class="footer_left">
<p>This text needs to be change.</p>
</div>
First of all, you have to bind a click event handler for a element. Also, you need to use event.preventDefault() in order to prevent the default behavior of the element.
For changing the text you can use innerHTML method.
var a=document.getElementsByTagName('a')[0];
var p=document.querySelector('.footer_left p');
a.onclick=function(e){
e.preventDefault();
p.innerHTML='changed';
}
<li class="class_1" id="item-1">
<a href="http://somethingxyz.com/">
<img src="http://somethingxyz.com/imaqges/image.png" class="mlt-lang">CLICK ON ME</a>
</li>
and the p tag in div element where i need to change the text is:-
<div class="footer_left">
<p>This text needs to be change.</p>
</div>
You can do it like this: use QuerySelector
<img src="http://somethingxyz.com/imaqges/image.png" class="mlt-lang" onclick="myFunction()">CLICK ON ME</a>
function myFunction(){
var p = document.querySelector(".footer_left p");
p.innerHTML = "your custom content";
}
function ConvertToAnchor ()
{
var paragraphs = document.getElementsByTagName('p');
for (var i =0 ; i < paragraphs.length ; i++)
{
var textt = paragraphs[i].textContent;
paragraphs[i].innerHTML = '<a href=http://www.' + textt + '.com>' + textt + '</a>'
}
}
I have html controls of two sets with different ids in my page, when I click a tag I want to call DoSomething method.
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue" >Value1</span>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue1">Value2</span>
</div>
function DoSomething() {
var htmlVal = "";
skuList = $("span[id*='spnValue']").html();
}
But whichever one I click it gives the Value1 in htmlVal. How can I distinguish and retrieve the value of method called
You can pass clicked element object to method:
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
and then use it for traversing to child span element:
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).find('span').html();
}
Working Demo
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).parent().find('span').html();
}
You can pass the current element in the function using that you can locate the span element which is a children on the a tag
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue" >Value1</span>
</a>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</a>
</div>
function DoSomething(node) {
var htmlVal = "";
skuList = $(node).find('span').html();//for children
//skuList = $(node).next('span').html();//for siblings
}
I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/
You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});
do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/