Develop Reference

How to compare a string with number

I have a span id with textContent which have their own time(hour/minutes)
<div class="here">
<span class="time" >8 min</span>
</div>
<div class="here">
<span class="time" >22 min</span>
</div>
<div class="here">
<span class="time" >38 min</span>
</div>
<div class="here">
<span class="time" >1 hour</span>
</div>
<div class="here">
<span class="time" >1 day</span>
</div>
How can we show the span text whose time is less then 60 min, i don't want to show the text of span which contains 1 hour or 1 day any way to do that and yes string with number is necessary for my project.

const els = document.querySelectorAll(".time")
els.forEach(el => {
if (/(hour)|(day)/.test(el.textContent)) el.style.display = "none"
})
<div class="here">
<span class="time">8 min</span>
</div>
<div class="here">
<span class="time">22 min</span>
</div>
<div class="here">
<span class="time">38 min</span>
</div>
<div class="here">
<span class="time">1 hour</span>
</div>
<div class="here">
<span class="time">1 day</span>
</div>

for(var i=0;i<5;i++){
if(document.querySelectorAll(".time")[i].textContent.includes("min")){
console.log(document.querySelectorAll(".time")[i].textContent);
}
}
}
This works too

jquery selector not working on a dynamic value

For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();

First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

Getting value form closest div

I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?

The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle

you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO

Hide divs with duplicate data using jQuery

I have a webpage where a long section of divs are pulled in from another application. I can't filter the divs before they're pulled in, but I need to hide divs (using jquery) that contain duplicate data for certain values.
Divs with duplicate data will always appear adjacent to one another and only come in pairs (never 3 or more divs with the same data), but there might be multiple pairs of duplicates on a page. There will never be more than 25 total .data-results divs on a page.
So, in the (long) example below, since #a-2 and #a-3 have exactly the same values for .data-one-result AND .data-two-result, I need to completely hide one of the divs (either one is fine), but leave #a-1 and #a-4 as-is. I don't care about the values in .data-three and it will have different values even in the duplicate divs.
(edit: changed date-one to data-one because of a typo)
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

Try this : You can iterate all data-results divs and compare result one and two of current div with next div. if result matches then hide next div.
NOTE - You have date-one and data-two where date-one should be data-one (date should be data) for consistency. I have coded using date-one hence make changes once you change in html code.
$(function(){
$('div.data-results').each(function(){
if($(this).is(':visible'))
{
var $nextDiv = $(this).next('div.data-results');
if($nextDiv.length > 0)
{
var thisResultOne = $(this).find('div.date-one .data-one-result').text();
var nextResultOne = $nextDiv.find('div.date-one .data-one-result').text();
var thisResultTwo = $(this).find('div.data-two .data-two-result').text();
var nextResultTwo = $nextDiv.find('div.data-two .data-two-result').text();
if(thisResultOne == nextResultOne && thisResultTwo == nextResultTwo)
{
$nextDiv.hide();
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

Match the span values with the previous elements using each() and slice() functions.
$('.data-holder > div').each(function(){
var currElement = $(this);
var index = $('.data-holder > div').index($(this))-1;
var previousElements = $('.data-holder > div').slice( 0, index <= 0 ? 0 : index );
console.log(previousElements);
previousElements.each(function(){
if(
$('span',this).first().text() == $('span', currElement).first().text() &&
$('span',this).last().text() == $('span', currElement).last().text()
){
currElement.hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

keypress in appended html [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?

Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.

here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});