I want to create a function that will retain the alt value, so that I can take the name of a movie and transport it to the next webpage.
<div class="now-showing">
<ul class="movie-items">
<li>
<img id="a" src="/images/movie-a.jpg" alt="Movie A">
<button>BOOK</button>
</li>
<li>
<img id="a" src="/images/movie-b.jpg" alt="Movie B">
<button>BOOK</button>
</li>
<li>
<img id="a" src="/images/movie-c.jpg" alt="Movie C">
<button>BOOK</button>
</li>
</ul>
</div>
I'm aware that I have the same id name for each item, however I have 14 films in total at the moment, so I would like to have a single function that can get each items unique alt value. Currently, no matter which movie link I click, it shows me 'Movie A' using the following function:
function getMovieName() {
let link = document.getElementById('a');
let movieInfo = [];
movieInfo.push(link.alt);
console.log(movieInfo);
};
You can detect which A was clicked (and find the matching IMG tag) from the structure of the LI.
function getMovieName(e) {
e.preventDefault(); // stop the browser from immediately going to a.href
let link = e.target; // the link that was clicked
let img = link.closest("li").querySelector("img"); // the img that is in the same grandparent "li" tag as the link that was clicked
console.log(img.alt);
};
<div class="now-showing">
<ul class="movie-items">
<li>
<img src="/images/movie-a.jpg" alt="Movie A">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-b.jpg" alt="Movie B">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-c.jpg" alt="Movie C">
<button>BOOK</button>
</li>
</ul>
</div>
Your HTML is invalid, each ID should be unique.
Your code doesn't work, because .getElementById returns first element found.
Just use a different id for each movie
Related
I have some divs on a page in this order as below. When someone clicks a link inside the UL .list-links I want to capture the value of
<span class="asa_portlet_title">Title here</span>
in a variable. I've tried using siblings and closest but it always returns empty.
--
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
--
$('[ul.list-links a').click(function() {
var _portletTitle = $(this).siblings('.my_portlet').text();
});
Open to pure javascript method as well. Basically I have a number of divs on the page containing links, and those divs have another div above it where the title exists
Would anyone be able to put together a small working sample?
You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.
$('ul.list-links a').click(function(event) {
event.preventDefault();
var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
console.log(_portletTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here 2</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name 2
Link name 2
Link name 2
Link name 2
</li>
</ul>
</div>
</div>
I would like to get a certain innerText from a clicked element in a HTML document that I clicked.
The corresponding HTML looks something like this:
!DOCTYPE html>
<html>
<head>
<title>Some title</title>
</head>
<body>
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
</body>
</html>
A Javascript function should return either "First" or "Second" depending on the clicked link.
My basic idea is to add an event listener and use the returned event to get the content of the span element:
function(){
document.addEventListener('click', function(e) {
e = e || window.event;
var spanText= e.path[i].innerText; //Don't know how to assign i correctly
return spanText;
}, false);
}
My problem is that I don't know how to define i or if there is something more suitable than .path[i] to work with. Depending on whether I click the image or the text.
Add the click events to the list items
in the handler, retrieve the 'span' child and get its text
var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
el.addEventListener('click', onClick, false);
})
function onClick(e) {
var li = e.currentTarget;
var span = li.querySelector('span');
console.log(span.innerText);
}
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
function init(){
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if(!link)return;
e.preventDefault();
var text = link.textContent;
alert(text);
return spanText;
});
}
init();
You can check what concrete element was clicked and then return its text. if you want to have some additional information - use data- attributes and read target.dataset to read it.
document.addEventListener('click', function(e) {
var target = e.target;
if(target.tagName === 'SPAN') {
console.log(target.innerText);
return target.innerText;
}
}, false);
<ul class="categories">
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
If the structure is consistent, then there will always be the same number of <span> elements as <a> elements.
Consequently, if you know the user just clicked on the second <a>, you'll know the <span> you need to return is the second <span>.
Working Example:
var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');
function getTextContent(e) {
e.preventDefault();
var linksArray = Array.prototype.slice.call(links);
var index = linksArray.indexOf(this);
console.log(spans[index].textContent);
}
links.forEach(function(link){
link.addEventListener('click', getTextContent, false);
});
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
Sorry for my bad language..
I'm late to reply.
Maybe it will help someone else;
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
And..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
the code you want : let div = event.target.innerText;
I have a list each item in the list contains an image and a map
<ul class="slides">
<li>
<img src="slide1.jpg" />
<map id="map-one"></map>
</li>
<li>
<img src="slide2.jpg" />
<map id="map-two"></map>
</li>
<li>
<img src="slide3.jpg" />
<map id="map-thre"></map>
</li>
to use the map on the img tag should I add the attribute usemap, for example in the first element of the list
<li>
<img src="slide1.jpg" usemap="#map-one" />
<map id="map-one"></map>
</li>
to get the id of the maps I have done the following with JQuery
var $mapid;
$('.slides li map').each(function(i, elem) {
var $this = $(this);
$mapid = $this.attr('id');
});
using
console.log($mapid);
the result is the following
map-one
map-two
map-thre
But now I don´t know as assigning to each image the usemap attribute and the value of this attribute is the id of the map to be used for coordinates.
like this
<ul class="slides">
<li>
<img src="slide1.jpg" usemap="#map-one" />
<map id="map-one"></map>
</li>
<li>
<img src="slide2.jpg" usemap="#map-two" />
<map id="map-two"></map>
</li>
<li>
<img src="slide3.jpg" usemap="#map-thre" />
<map id="map-thre"></map>
</li>
You can use the setter version of .attr(), then you can return the id of the next element(which is the map element) prefixed with #
$('.slides li img').attr('usemap', function (i, elem) {
return '#' + $(this).next().attr('id')
});
Demo: Fiddle
You don't need intermediate variable. You can just get previous img element and set its id directly:
$('.slides li map').each(function () {
$(this).prev('img').attr('id', '#' + this.id);
});
Hi I need some help with this.
Heres my code:-
<ul class="product nobullet clearfix nomargin">
<li class="product1">
<div class="img-holder">
<a href="/Mens/Shower/Bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
<script>
$('ul.product').children().has("li").each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).children("li").addClass(url[3]);
});
</script>
It doesn't work I'm still new to jquery and could do with some help.
I need to read each product class li's read the url take the 3 item using / as asperator then add this to the li class. The code needs to loop through all the product li's
There can be upto 20 product classes all start with product then have a number at the end e.g. product1
Not sure if i've explained theat well enough so....
After the jquery code runs the html should look like this:-
<ul class="product nobullet clearfix nomargin">
<li class="product1 bodywash/">
<div class="img-holder">
<a href="/Mens/Shower/bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2 shampoo">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3 deoderant">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
Check this
As you are iterating over li's you just need to use $(this).addClass(url[3]);
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
Nitin's answer is almost correct.
Firstly since you're new to jQuery it's worth explaining that your selector isn't matching <li>s like you think it is
$('ul.product').children().has("li")
Will match any children of the ul which have a descendant which is an <li>. Since the list items are the children of the list they themselves will not have list items as children.
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
With reference to this code ^ it's worth noting that JavaScript is a zero-based language. So you'll want to use url[2] to get the third item in that array
So I have a series of 2 nested ul's. When you click on the text (which is in an a tag) in the li, my page makes that editable and adds a save button. clicking the save button needs to give me back the new text inside that li and the id of that li. The id is not a problem. I'm trying to use jQuery's .find to select that anchor tag (which is successful) but i can't seem to get the text from it.
Here is an example of the first list and it's sublists.
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
<ul class='sublists'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Here's the code for identifying which save button you clicked.
function SaveName(parentid){
$('li').find('a').each(function(){
if (this.id == parentid){
alert(this.id+' '+this.text)
}
}
});
I am wanting this.text to show me the text inside the anchor tags. Help, please?
===========================================================
Edit:
Please excuse this post. The problem was that I was using Jeditable and didn't know that it would put in a form in place of the text, so anything that would call text wouldn't work. Sorry.
simply use $(this).text() instead of this.text
To be honest, I don't understand the logic behind this function, because your function could have been written as:
function SaveName(parentid) {
alert($('li a#' + parentid).text();
}
});
Or may I suggest an alternative way of doing what you intented:
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this)" src='save.jpg'>
<ul class='list1subs'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Javascript:
function SaveName(element) {
alert($(element).prev("a").text());
}
Remove the inline handlers, bad karma.
$(document).ready(function(){
$('.list1subs > li').find('img').bind('click', function(e){
var $this = $(this);
alert($this.siblings('a').text());
});
});
Ok, so when I clicked on the field, I was using Jeditable to make the field edit in place. Clearly I didn't understand what this doing, because it inserts a form using what you supply. This is why whatever.text() was coming back blank. It wasn't counting the form as text, so it skipped it.