My HTML Code is as follow :
<div class="listitems">
user1#mail.com
<a style="float: right;vertical-align: top;" data-recom-user="3" data-recom-mile="4">
<i class="icon-eye-open"></i>
</a>
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" title="Recommend this user"></i>
</div>
i have trigger click event on <a> in event handler function i want to access closest <a>
i tried $(this).closest("<i>") in this i got <i class="icon-eye-open"></i> how i can get
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
Element so that i can change some some attributes of it.
Based on your HTML markup, you can use siblings() or next() instead:
$(this).siblings('i')
or:
$(this).next()
Also, note that closest() will traverse up the DOM tree, this method is not using to find the child elements
For getting inner anchor tag:
$(this).find("i")
For sibling:
$(this).siblings("i")
$(this).closest("<i>")
<i class="icon-eye-open"></i>
$(this).find("i .icon-hand-up")
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
$(this).find("i .icon-hand-up").attr('','') ; // you can change the attribute
or
$(this).parent().find("i:last").attr('','');
$(document).ready(function () {
$(".listitems a").click(function () {
var sss = $(this).find('i');
alert(sss.text());
});
});
Related
so ive got this code
<div class="col-lg-12 video-meta">
<div class="container">
<span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
<a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
</span>
and i target it with
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?
it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..
event.target is the <i> element, because that's the element on which the click really occured.
If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:
$('.like').on('click', function(event) {
event.preventDefault();
console.log(event.target); // <i>
var isLike = event.currentTarget.previousElementSibling == null;
console.log(isLike);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
<div class="container">
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
<a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
</span>
</div>
</div>
Hello I'm quite new with jquery and I can't get something to work.
I'm trying to transform a div with a .click function:
JQUERY
$(document).ready(function(){
$('#show').click(function(){
$('.element', this).toggleClass('hidden');
$(".change-width", this).toggleClass(' col-md-12 ');
$(".change-width", this).toggleClass('col-md-3');
$(".blok", this).toggleClass('same-height').toggleClass('h100');
if($(this).hasClass('SeeMore2')){
$(this).html('<i class="fa fa-angle-double-left" aria-hidden="true"></i> Terug naar overzicht');
} else {
$(this).html('Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i>');
}
});
});
HTML:
<div class="blokk change-width col-md-3 ">
<div class="blok same-height ">
<i class="fa fa-user-md fa-4x" aria-hidden="true"></i>
<h3>Hoofdpijn</h3>
<img class="element hidden" src="../images/behandelingen/headache.jpg">
<p>text</p>
<p class="element hidden">text</p>
</div>
<button id="show" onclick="fastScroll(document.getElementById('navigationz'))">Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
</div>
Somehow it works without the ,this selector but without the ,this it will select all divs which i obviously don't want.
Can anyone tell me what I'm doing wrong?
Thanks in advance :)
I don't believe $('.element', this) is valid syntax.
Alternatively, you're supposed to orient your DOM selectors relative to $(this) like a tree traversal. For example, in your situation, $(this) references the button with an id of show (because it is attached to the click handler).
Therefore, to access .change-width, you need to access the parent of $(this). In other words, replace
$(".change-width", this).toggleClass(' col-md-12 ');
with
$(this).parent(".change-width").toggleClass(' col-md-12 ');
As another example, if you want to access .blok, find the relationship between that element and $(this). .block is the previous sibling of this element. Therefore replace
$(".blok", this).toggleClass('same-height').toggleClass('h100');
with
$(this).prev(".blok").toggleClass('same-height').toggleClass('h100');
And finally, you want to access .element. I see that you have 2 .elements, and that both of them are children of .blok. In other words, .elements are the children of the previous sibling of $(this). Therefore replace
$('.element', this).toggleClass('hidden');
with
$(this).prev(".blok").children(".element").toggleClass('hidden');
Here are some jQuery documentation regarding these functions:
https://api.jquery.com/category/traversing/tree-traversal/
I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}
The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {
('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id
I am trying to remove the $movieDiv that is appended when clicking "#buttonLicensedMovie". It appends to the html just fine and the same button hides just fine, as it should. The issue I am having is when I click the anchor tag with id "licensedMovie1, the $movieDiv does not remove and the "#buttonLicensedMovie1" does not show back up. What am I doing wrong? Any help would be appreciated. Thanks!
JQuery:
$(function() {
$("#buttonLicensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").append($movieDiv);
$("#buttonLicensedMovie1").hide();
});
});
$(function() {
$("#licensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com/" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").remove($movieDiv);
$("#buttonLicensedMovie1").show();
});
});
HTML:
<div class="col-xs-12">
<button id="buttonLicensedMovie1" type="button" class="btn btn-default"><h5>Becoming an Agent <i class="fa fa-caret-square-o-right fa-lg" aria-hidden="true"></i></h5></button>
<div class="col-xs-12" id="movieLicensedWrapper1">
</div>
</div>
You could use (won't work in your case because not everything is inside the p):
$("#movieLicensedWrapper1 p.header").remove();
Or you create a global variable and assign the value with:
$movieDiv = $.parseHTML('...');
And then you can remove with just:
$movieDiv.remove();
When you append it works fine because you are just adding html. However, when you want to remove you need to select the DOM element. Try this instead:
var $movieDiv = $('#movieLicensedWrapper1').find('.header');
$movieDiv.remove();
<li data-id="528">
<a title="LOGIN" class="dropdown-toggle" href="#">
<i class="glyphicon glyphicon-user"></i>LOGIN</a>
<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>
I Have this html I want to change the content by data-id like given below
<li data-id="528">
<a title="LOGOUT" href="/logout">
<i class="glyphicon glyphicon-user"></i>LOGOUT</a>
<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>
Is this possible if, Please advice me
Thank you.
Yes it's possible.
Like this
var a=$('li[data-id="528"]').find('a');
a.attr('href','/logout');
a.contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('LOGIN','LOGOUT');
});
You can get the element by attribute selector, and use .html() to modify content:
$('[data-id="528"]').html('<a title="LOGOUT" href="/logout"><i class="glyphicon glyphicon-user"></i>LOGOUT</a><div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>')
Actually you can modify innerHtml of an jquery element by .html()
$(selector).html(whatEverYouWant);
Try it.
var htmlData = '<a title="LOGOUT" href="/logout">';
htmlData+= '<i class="glyphicon glyphicon-user"></i>LOGOUT</a>';
htmlData+='<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>';
jQuery('li[data-id="528"]').html(htmlData);
You can write just one line code for this
$('li[data-id="528"]').find('a').attr("title","LOGOUT").attr("href","/logout").html('<i class="glyphicon glyphicon-user"></i>LOGOUT</a>');