Change background color closest class - javascript

I have following HTML:
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagNone"></span>
</span>
</span>
</a>
</article>
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagRed"></span>
</span>
</span>
</a>
</article>
And now I would like to change the background-color from the span with class 'articleTitle' to red, if the class 'flagNone' is set in this article. It should only change in this article not in the following one.
I tried this:
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
}
});
but it doesn't work. Any ideas?

Hello Please check this Demo
$(document).ready(function() {
if ($('.articleFlag.flagNone').length>0) {
$('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
}
});
I think it will help you

Use jQuery's :has() selector (demo)
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.row:has(.flagNone) .articleTitle').css("background", "red");
}
});

Closest traverse up the dom tree, that is the reason your selector doesn't work
try below js code
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
}

Related

Hover over div to reveal nested span with jQuery

I thought this would work outright, but I must be missing something.
I have a nested span of content in a div and I'm trying to get that span to show on hover (and hide on mouseout).
I thought that just doing a $(this).find('.name-of-span') inside of ahover` function would do it, but something must be missing.
This is what I have:
HTML:
<div class="parent-item">
<h3>title 01</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<div class="parent-item">
<h3>title 02</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
JS:
$('.parent-item').hover(function() {
$(this).find('.meta--reveal').show();
});
I thought that should work, but again, I'm probably missing something.
I also tried to do this with CSS with an adjacent sibling selector, but that wasn't working either.
You can construct a CSS rule that only hides the nested element if the parent is not hovered.
.parent-item:not(:hover) .meta--reveal {
display: none;
}
<div class="parent-item">
<h3>title 01</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<div class="parent-item">
<h3>title 02</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
Otherwise, your existing logic does work. You're just missing the second method that reverts the show.
$('.parent-item').hover(function() {
$(this).find('.meta--reveal').show();
}, function(){
$(this).find('.meta--reveal').hide();
});
.parent-item .meta--reveal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-item">
<h3>title 01</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<div class="parent-item">
<h3>title 02</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
this is working. First, the going to show element must be 'display: none'.
$('.parent-item').hover(function() {
$(this).find('.meta--reveal').show();
});
.meta--reveal {
display:none;
}
<div class="parent-item">
<h3>title 01</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<div class="parent-item">
<h3>title 02</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Also usable children() instead of find()
Hide all the link before displaying the selected one.
$('.parent-item').hover(function() {
//hide all the link before displaying the selected one.
$('.meta--reveal').hide();
//displays the selected item
$(this).find('.meta--reveal').show();
});
Use jQuery to add and remove classes to toggle display, teamed up with the '.children' for targeted selection
$(document).ready(function() {
$(".hover").mouseover(function() {
$(this).children('.target').removeClass("hide").addClass("reveal");
});
$(".hover").mouseleave(function() {
$(this).children('.target').removeClass("reveal").addClass("hide");
});
});
.hide {
display: none;
}
.reveal {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover">
<h3>title 01</h3>
<div class="target hide">
<span class="metaReveal"><a class="btn" href="#">Link</a></span>
</div>
</div>
<div class="hover">
<h3>title 02</h3>
<div class="target hide">
<span class="metaReveal"><a class="btn" href="#">Link</a></span>
</div>
</div>

Hiding and showing fields via Javascript based on the type of the category the results item has

I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.

I have a JQuery working but little buggy

On hover I want to hide span(options) and show span(options2) and when the pointer out of that span it will it will be back to normal stage like span(options2) hide and span(options) show.
Some time it work but some time the span(options2) shows and not hide after pointer out of the span it stuck and continuously show the span(options2) until we don't hover again.
HTML:
<div class="layer"> <span class="pull-left circle border-solid full"><i class="flaticon stroke checkmark-1"></i></span>
<span class="pull-right options"><ul class="null"><li></li><li></li><li></li></ul></span>
<span class="pull-right options-2">
<ul class="null">
<li><i class="fa fa-trash-o"></i></li>
<li><i class="fa fa-pencil"></i></li>
</ul>
</span>
<div class="col-md-12 col-sm-12 col-xs-12 null">
<button class="btn btn-layer">Preview</button>
</div>
</div>
JQuery:
$(this).find('.layer').find('.options').hover(function () {
$(this).hide();
$(this).parent('.layer').find('.options-2').show();
$(this).parent('.layer').find('.options-2').mouseout(function () {
$(this).hide();
$(this).parent('.layer').find('.options').show();
});
});
You need to bind the mouseout event handler outside. Also .prev() and .next() can be used as .options and .options-2 are siblings.
$(function() {
$('.layer .options').hover(function() {
$(this).hide();
$(this).next('.options-2').show();
});
$('.layer .options-2').mouseout(function() {
$(this).hide();
$(this).prev('.options').show();
});
})
.options-2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer">
<span class="pull-left circle border-solid full">
<i class="flaticon stroke checkmark-1"></i>
</span>
<span class="pull-right options">
options
</span>
<span class="pull-right options-2">
options-2
</span>
</div>

Copy text from span to other span

I am trying to copy contents of one span to another span on anchor click even.
It works fine if i remove the wrapper title div's example jsFiddle
when i wrap them inside div it doesnt work anymore i tried different thing so far i am not able to find right property or function to use.
This one needs fix jsFiddle
<div style="float:left; width=800px;" id="video_container">
<iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
</div>
<span class="active-video-title">Title</span>
<span class="active-video-date">Date</span>
<div class="row">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 1</span>
<div class="title-wrapper">
<span class="title">Title of the Video 1</span>
<span class="date">Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 2</span>
<div class="title-wrapper">
<span class="title">Title of the Video 2</span>
<span class="date">Date 2</span>
</div>
</a>
</div>
<div class="row2">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 1</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 1</span>
<span class="featured-date">featured Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 2</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 2</span>
<span class="featured-date">featured Date 2</span>
</div>
</a>
</div>
.children() will get the children of each element in the set of matched elements, optionally filtered by a selector.
Use find() method which will get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.:
$(document).ready(function () {
$('.play-youtube').click(function (e) {
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="438" height="250" src="http://www.youtube.com/embed/' + URL + '" frameborder="0" allowfullscreen="1" ></iframe>';
$(".active-video-title").html($(this).find(".title").html());
$(".active-video-date").html($(this).find(".date").html());
$(".active-video-title").html($(this).find(".featured-title").html());
$(".active-video-date").html($(this).find(".featured-date").html());
return false;
});
});
DEMO FIDDLE

how to add text on 5 span that uses same id

How do i add a text to all 5 spans that share the same id.
the html goes:
<div class="body">
<form>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
</form>
</div>
The js:
function check_aff_payment(elem){
$(elem).find('#test').each(function(){
$("#test").text("*");
});
}
ID's on a HTML page are required to be unique.
Try using class instead
<div class="body">
<form>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
</form>
</div>
function check_aff_payment(elem){
$(elem).find('.test').each(function(){
$(this).text("*");
});
}
Check Fiddle

Categories

Resources