I would like to hide an entire div when there isn't the text i'm writing inside a input form.
For now i'm able to search inside all childs div and hide every child div if there isn't the text.
But i have a problem right now, example:
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome">
<b>Nome: </b> Davide
</div>
<div class="col-4 regione">
<b>Regione: </b> Reggio
</div>
<div class="col-4 citta">
<b>Città: </b>Citta "
</div>
</div>
<div class="row">
<div class="col-4 dataNascita">
<b>Data di nascita: </b>02-02-1992
</div>
<div class="col-4 coaching">
<b>Coaching online: </b>Sì
</div>
<div class="col-4 sesso">
<b>Sesso: </b>Maschio
</div>
</div>
<div class="row border-bottom">
<div class="col-6 blurry-text cellulare">
<b>Cellulare: </b> 1231231231
</div>
<div class="col-6 blurry-text email">
<b>Email: </b>asdaklsnd#gmail.com
</div>
</div>
<div class="row descriptionText">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'>
<button type='button'>Profilo</button>
</div>
</div>
</div>
if i search Davide all the others childs of the .infos div will be hidden since they doesn't contain the text, but i would like to keep them visible if there is another child that actually contain the text.
I've created an example here for testing : https://jsfiddle.net/hj9r2L4u/6/
I would like to have the possibility to input more words for the search bar, image having 2 users with name Davide, but with different city, i would like to input something like
Da City2
With "Da" i actually show both div, then with City2 i hide the div that doesn't have the text in it.
The code i'm actually using is:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery(".information").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
You could wrap the rows and target this as the containing element, see the snippet below:-
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery('.row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container w-100 h-100">
<input id="searchPt">
<div id="goToProfile">
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="rowWrap">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Davide </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Citta "</div>
</div>
<div class="row">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
<div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
</div>
<div>
<div class="rowWrap">
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Simone </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Emilia</div>
</div>
<div class="row\">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>No</div>
<div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
</div>
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
</div>
</div>
For multiple criteria, do a split and test each value with some short-circuit logic:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase().split();
jQuery(".information").filter(function() {
for(var i=0; i<value.length; i++){
if($(this).text().toLowerCase().indexOf(value[i]) === -1) {
$(this).toggle(false)
return false;
}
}
$(this).toggle(true);
return true
});
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
The code:
$('.del').click(function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
$('#order-items').append(Data.order_item_clone)
}
})
What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
</div>
<div class="col-md-9 obox-purity obox">
</div>
<div class="col-md-4 obox-info obox-price obox">
</div>
<div class="col-md-4 obox-info obox-weight obox">
</div>
<div class="col-md-4 obox-info obox-total-price obox">
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance
Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)
$(document).on('click','.del', function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
alert("append now");
// $('#order-items').append(Data.order_item_clone)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
alpha
</div>
<div class="col-md-9 obox-purity obox">
beta
</div>
<div class="col-md-4 obox-info obox-price obox">
gamma
</div>
<div class="col-md-4 obox-info obox-weight obox">
yellow
</div>
<div class="col-md-4 obox-info obox-total-price obox">
blue
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.
$(document).on('click','.del', function(e){
I am trying to setup a discord.js bot that pulls div data based on a class
<template v-if="activeWindow">
<div class="trn-card mb0">
<div class="trn-card__header">
<h3 class="trn-card__header-title">Session {{ activeWindowNumber }}</h3>
<span class="trn-card__header-subline">{{ activeWindow.matchesPlayed }} Matches</span>
</div>
<div class="trn-card__content">
<div class="fn-event-team__stats mb8">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Rank</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.rank }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Points Earned</div>
<div class="fn-event-team__stat-value">{{ activeWindow.pointsEarned }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Eliminations</div>
<div class="fn-event-team__stat-value">{{ activeWindow.kills }}</div>
</div>
</div>
<div class="fn-event-team__stats fn-event-team__stats--small">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">K/D</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.kdRatio }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Kills</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgKills }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Placement</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgPlacement }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Points</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgPoints }}</div>
</div>
</div>
</div>
</div>
I'm trying to pull the value from the divs with the class "fn-event-team__stat_value, how would I go about doing so?
You can try out by using the javascript method as follow :
var arr = [];
$("#Button").click(function() {
var items = document.getElementsByClassName('.fn-event-team__stat_value');
for (var i = 0; i < items.length; i++)
arr.push(items[i].value);
});
console.log(arr) ; //you will get all the values of divs .
You can use document.querySelectorAll and map which will return an array. innerHTML will give the content of the div. trim is used to remove any white space.
let vals = [...document.querySelectorAll('.fn-event-team__stat-value')].map(item => item.innerHTML.trim());
console.log(vals)
<div class="trn-card__content">
<div class="fn-event-team__stats mb8">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Rank</div>
<div class="fn-event-team__stat-value">2</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Points Earned</div>
<div class="fn-event-team__stat-value">3</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Eliminations</div>
<div class="fn-event-team__stat-value">4</div>
</div>
</div>
<div class="fn-event-team__stats fn-event-team__stats--small">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">K/D</div>
<div class="fn-event-team__stat-value">5</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Kills</div>
<div class="fn-event-team__stat-value">6</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Placement</div>
<div class="fn-event-team__stat-value">7</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Points</div>
<div class="fn-event-team__stat-value">8</div>
</div>
</div>
</div>
I have the following HTML and I want to pull the value from one div into another and if possible to put a : between them.
It is about to add the value of div class="ITSv" to the value of div class="ITSn"
Source HTML:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
Target format:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Batteryform: Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage: 1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity: 7800 mAh</div>
</div>
You can do the following
Array.from(document.getElementsByClassName('ITSn')).forEach(element => {
element.innerText += ': ' + element.nextElementSibling.innerText;
element.nextElementSibling.remove();
});
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
Don't need Js. Just try with the css display property after pseudo-element
.ITSn:after {
content: ': '
}
.ITSn,
.ITSv {
display: inline-block;
}
<div id="HTML_SPEC" class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
</div>
I have a foreach loop and this creates multiple div elements.
I added an onClick event when user clicks on the div it is doing fadeIn or fadeOut.
The problem is, that all of the div's obvouisly have same id and when I click on one of the div's it is fade in and fade out only the first div element.
I don't really know how to fade in and fade out them individually.
I have added my code in Fiddle
function showItems() {
var x = document.getElementById('showItemDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>
You should not use same id for multiple elements. Id for each element should always be unique. If you use same id the selector returns only the first element with matching id.
You should use class with same name.
For each element clicked you can find its parent and for that you can find a child with required class and toggle its visibility.
function showItems(ev) {
var x = $(ev.target).parents('.row.rounded-top').find('.showItemDiv');
$(x).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>
I have HTML codes like below.
When "Click" is clicked, the parent (div class="studentRow" ref="xxxx") is appended in the (div id="favoriteListContent").
The Rank text may contain some letters. The rank should be sorted using only number. If the Rank value is NO, this should be listed last - lowest rank.
How can I sort the sets of divs based on the Rank value in the (div id="favoriteListContent")? Right now, the divs are displayed in the order they are clicked. (see Demo http://jsfiddle.net/sunflowersh/YeSvH/11/)
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent"></div>
</div>
<div id="studentList">
<h2>List</h2>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1050">
<div class="favRow1" ref="1050">click</div>
<div class="positionRow1">D2</div>
<div class="studentRow1">Name C</div>
<div class="todayRow1">A</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
I want to have the end result to be like
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent">
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
</div>
and Not
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>