find is not working to select data from dom in jquery - javascript

what i need
i need to access href from class events_links .
html code
<div class="row flush frt" itemscope="" itemtype="http://schema.org/Event">
<div class="12u">
<div class="evntblk">
<a itemprop="url" class="events_links" href="/dailymail-ideal-homeshow">
<h2 class="lnh1" itemprop="name">Ideal Home Show - London</h2>
</a>
<div style="display:block; float:right; width:auto; color:#7c7c7c;"></div>
<span itemprop="startDate" class="startdates" content="2015-03-20">20 Mar-06 Apr 2015</span><span itemprop="endDate" class="enddates" content="2015-04-06"></span><br><span itemprop="location" itemscope="" itemtype="http://schema.org/Place"><span itemprop="name" style="display:none">Olympia Exhibition Centre</span><span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality" class="eventcity">London</span>,
<span itemprop="addressCountry" class="eventcountry">UK</span></span></span>
<p class="tal" style="overflow:hidden">The ZEE Asian Pavilions are a celebration of British Asian Culture, that encapsulates Asian food, Asian fashion,...<br><span style="background: none repeat scroll 0 0 #ECECEC; border-radius: 5px; color: #333333; display: inline-block; font-size: 0.8em;line-height: 13px; margin: 5px 2px 0 0 !important; padding: 5px 8px;">Home Furnishings & Home Textiles</span></p>
</div>
<div class="row flush footer"><div class="12u"><a class="button button-blue small">View Details</a></div></div>
js code
$('.small').click(function()
{
alert("test");
window.location.href = $(this).find(".events_links").attr("href");
});
snapshot of html element
i have tried to access with .parent() but it not working.
o/p
i need to access events_links class by click on class small so that i
would get href from that html element.
any suggestion are most welcome.

Simple solution to get only the related url is with parent() function:
$('.small').click(function()
{
window.location.href = $(this).parent().parent().parent().find(".events_links").attr("href");
});
since you are three levels underneath.
find() will start searching from the given object downwards in hierarchy.
BUT as stated before, this will fail, as soon as you change your html layout and maybe drop or add a div container.
it would be much better practice to give your divs containing the urls unique id's or store the link with the data attribute of the button.
So for example if in your HTML Code you had this
<div id="link12" class="event_links" href="FOUND THIS!">
<div class="whatever">
<div class="anotherone">
<div class="button small" data-link="link12" data-href="FOUND THIS HERE TOO!">
CLICK HERE
</div>
</div>
</div>
</div>
Then your click code could access URL via 2 methods:
$('.small').click(function()
{
// METHOD 1: get by storing unique id with button
alert($('#'+$(this).attr('data-link')).attr("href"));
// METHOD 2: same effect, but shorter storing href at button
alert($(this).attr('data-href'));
});

try this
$('.small').click(function() {
alert("test");
window.location.href = $(".events_links").attr("href");
});

I would suggest data-attr in this case, where you do not want to depend on code structure and css.
<div class="row flush footer">
<div class="12u">
<a class="button button-blue small" data-relative-path="some-location">View Details</a>
</div>
</div>
And
$('.small').click(function(){
window.location.href = $(this).data('relative-path');
});

You can try this one:
$('.small').click(function() {
alert("test");
window.location.href = $(".evntblk .events_links").attr("href");
});

If you need to get only href of the single .event_links object in the current .box.panel do:
$('.small').click(function()
{
alert("test");
window.location.href = $(this).closest(".box.panel").find(".events_links").attr("href");
});
closest will get you the first parent element that matches the selector. This way if you have any other .event_links that are not into this panel, they'll be skipped. If you use parent() you'll be forced to keep the same HTML sturcture between the .small and it's parents.

First of all it's bad practice to try and load a url based on a css class. That is because it is probable you use css classes repeatedly on a single page, resulting in multiple anchor selections.
However you could do the following:
$('.small').click(function()
{
var btn = $(this);
// find the closest element of click button with class 'event-block'
// find the element with class 'events_links'
// change window location to value at href
window.location.href = btn.closest('.event-block').find('.events_links').attr("href");
});

Related

if data attribute is true, add class

I want buttons in a slider to get underlined when a slide is visible.
I think I need to check if a data attribute is true, and then add class.
When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"
I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.
I think I am close and have tried these two codes:
jQuery(function () {
if (jQuery('menu1').attr('isactiveslide') === true) {
jQuery(this).find("#test1").addClass("underline");
}
})
and
jQuery('menu1').each(function(){
if(jQuery(this).attr('isactiveslide')==true())
jQuery('#test1').addClass('underline');
})
EDIT (added after some great answers and questions)
And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:
<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><
So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.
EDIT May 4th - I think I am close now, but it still does not work.
jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');
any help is very appreciated!
Can be easily done by css:
You need to find the class applied on the active slide and button
rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
text-decoration:underline!important;
}
or
Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.
Try this code:
var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
$("#test1")[index].classList.add('underline');
$("#test1")[index].innerText = "Selected!";
console.log(1);
})
<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>
The beginning declaration of $ is simply defining it since I did not import jQuery.
The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.

How do I select a span content, using jquery?

I have the next html.
I need to get a span text content of 'Jan' and '2017' in a onclick function.
I can´t use contains('Jan') or contains('2017') because that values can change at runtime.
I tried the next but no success.
div.relative {
position: relative;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 3px solid #73AD21;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ClockClicked(){
var smonth=$("span.spanmonth").filter(function() { return ($(this).text()) });
var syear=$("span.spanyear").filter(function() { return ($(this).text()) });
alert(smonth+'-'+ syear);
};
</script>
</head>
<body>
<div class="myclock">
<div class="controls">
<a class="pull-left">
<div class="btn btn-primary" onclick="ClockClicked()">Click me</div>
</a>
<h4>
<span class="spanmonth" Jan></span> - <span class="spanyear" 2017></span>
</h4>
</div>
</div>
</body>
</html>
html:
I have used this function:
As per statement get a span text content of 'Jan' and '2017' I am assuming HTML content is
<span class="spanmonth" >Jan</span> - <span class="spanyear">2017</span>
You need to use .text(). No need of using .filter()
var smonth=$("span.spanmonth").text();
var syear=$("span.spanyear").text();
alert(smonth+'-'+ syear);
I would recommend you to use unobtrusive event handler as #Rory McCrossan suggested.
Firstly note that your HTML is invalid. The Jan and 2017 values should be wrapped in the span elements, not set as attributes of it - which itself is invalid.
Secondly it's better practice to use an unobtrusive event handler over the now outdated on* event attributes. Within that event handler you can use the this keyword to reference the element that raised the event and traverse the DOM to find the span you require. In this case, closest() and find() would suit your needs. Try this:
$('.myclock .btn').click(function() {
var $clock = $(this).closest('.myclock');
var month = $clock.find('.spanmonth').text();
var year = $clock.find('.spanyear').text();
console.log(month, year);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclock">
<div class="controls">
<a class="pull-left">
<div class="btn btn-primary">Click me</div>
</a>
<h4>
<span class="spanmonth">Jan</span> - <span class="spanyear" >2017</span>
</h4>
</div>
</div>
Note: Your html is invalid as you have 'Jan' between the < and > tag instead of text within the span.
In any case, you can try the filter -contains':
$( "span.spanmonth").filter(":contains('2017')" );
https://api.jquery.com/contains-selector/

Script not working in subsequent modals

I've got help with a script that works in the first modal but doesn't in any of the next couple. When you scroll down, the background color changes in the first modal but nothing happens in the second and so forth.
https://jsfiddle.net/qhrmtass/10/
var scrollFn = function () {
var targetOffset = $("#anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Specification says UNIQUE
HTML 4.01 specification says ID must be document-wide unique.
HTML 5 specification says the same thing but in other words. It says that ID must be unique in its home subtree which is basically the document if we read the definition of it.
First for the best practice you have to change duplicate id anchor-point (in my example i change it to class) also for the id one should be unique.
Secondly you have to use $(this) inside your scroll function scrollFn to detect the current scrolling remodal and to select the elements that belong to it.
HTML :
<a class="project-link" href="#modal1" id="one" style="margin-right:25px;">Modurra Shelving </a>
<div class="remodal" data-remodal-id="modal1">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div> <a class="project-link" href="#modal2" id="one" style="margin-right:25px;">Other stuff </a>
<div class="remodal" data-remodal-id="modal2">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div>
Js :
var scrollFn = function () {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".projectTitle").addClass("topper");
} else {
$(this).find(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Hope this could help, take a look at Working fiddle

AngularJS ng-mouseenter not working in child div

I have been using the AngularJS ng-mouseenter and mg-mouseleave and it has been almost the cause of my death. A quick explanation:
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true" ng-mouseout="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>
The CSS properties:
.avatarContainer {
max-width: 150px;
max-height: 150px;
display:inline-block;
float:left;
margin-right:5px;
position:relative;
}
.characterSum {
border: 1px;
min-height:160px;
position:relative;
}
I'm fairly certain it has something to do with my CSS properties. I followed a few instructions to automatically scale an image into a 150 x 150 size so that might explain my CSS properties for those wizards. Anyway, the reason why I think it has something to do with it is because when I add this:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">Hi</div>
And I add it under the parent class "characterSum", when I mouse over Hi, the button shows. As soon as I add this under the class "avatarContainer" the child div, it stops working. If I wrap the ENTIRE avatarContainer class with this div so:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">
HI
<div class="avatarContainer"> ......... </div>
</div>
It only shows the button when I go near hi. I added $scope.$watch on showButton to console.log('detected') whenever showButton changes and in every scenario, "detected" is never logged when I go over the img or anything EXCEPT FOR when I go over hi
Does anyone have any ideas on what crazy curse I have been put under? Or if not, I'm willing to use any other way of accomplishing this. (Basically want the button to show whenever the img is moused over). And I have already tried directly applying ng-mouseover to the img element to no avail.
You had a typo, you need to use ng-mouseleaveinstead of ng-mouseout
Markup
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true"
ng-mouseleave="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>

Working on DOM elements, finding next class

I have problem with working on DOM elements.
This is my HTML:
<div class="movie__feature">
▲
</div>
<div class="movie__images">
<span class="similarity_points">9</span>
<a href="http://www.filmypodobnedo.pl/Top-Gun/" title="Filmy podobne do Top Gun">
<img alt="Filmy podobne do Top Gun" src="http://www.filmypodobnedo.pl/photos/Top-Gun.jpg"/>
</a>
</div>
<div class="movie__feature">
▼
</div>
</div>
When I click on .plus class, I need to go to .similarity.
This is my jQuery:
$('.plus').click(function(e){
e.preventDefault();
var self = $(this);
self.closest('div').find('.similarity_points').text('10');
}
How my num should look?
The closest div doesn't contain .similarity_points as a descendent. You could use this:
self.closest('div').parent().find('.similarity_points').text('10');
But, be aware that code which is highly dependant on the structure of the DOM is also fragile.
In your code you are going up to .movie__feature, and then you are looking for children with the .similarity_points class.
You need to go up one more level and then look for the child element:
$('.plus').click(function () {
$(this).closest('div').parent().find('.similarity_points').text('10');
return false;
});

Categories

Resources