how to load html5 code in a ionic page - javascript

Hello I have a App i'm working on in ionic and I am trying to load a mobile calculator that I did in html in the ionic page but when I load my app it looks like it's not loading the css or js code so how do I get to do that?
here's my code:
<ion-view title="Math">
<ion-content padding="true" class="has-header">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- powerTouch -->
<script type="text/javascript" src="js/powertouch-js-1.5.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/moz.css">
<!-- font -->
<link href="css/font.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/l10n.js"></script>
<link rel="resource" type="application/l10n" href="locales.ini">
<script>
$(function(){
var powerTouch = $.powerTouch();
powerTouch.attachTouch(".ui-el");
powerTouch.attachGesture(".ui-gesture", {"acceleration":0});
});
</script>
<div class="frame">
<div class="film">
<div class="calc">
<div class="result ui-gesture">
<div class="cwrap fontlight hide">
×
</div>
<div class="exp fontlight" id="exp">
<div class="string" id="string">
<div id="string-film">
<!--<div class="text-frame">
<span id="text"></span>
</div>-->
</div>
</div>
</div>
</div>
<div class="keys">
<table class="pulsanti">
<tbody>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="(" data-long=")" data-longtap="1">
<span class="label rel">(
<span class="apice apM tohide">)</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="M" data-longtap="1" id="btn-m">
<span class="label rel">M
<span class="apice apM">×</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="Mr">
<span class="label rel">Mr</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="+">
<span class="label">+</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="7">
<span class="label">7</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="8">
<span class="label">8</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="9">
<span class="label">9</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="-">
<span class="label">—</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="4">
<span class="label">4</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="5">
<span class="label">5</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="6">
<span class="label">6</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="*">
<span class="label">×</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="1">
<span class="label">1</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="2">
<span class="label">2</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="3">
<span class="label">3</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val=":">
<span class="label">÷</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="0">
<span class="label">0</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val=".">
<span class="label">,</span>
</a>
</td>
<td colspan="2">
<a href="javascript:;" class="buttn insert ui-el uguale">
<span class="label">=</span>
</a>
</td>
</tr>
</tbody>
</table>
<table class="pulsanti extra">
<tbody>
<tr>
<td>
<a id="close-tonda" href="javascript:;" class="buttn insert ui-el par" data-val=")">
<span class="label">)</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="[" data-long="]" data-longtap="1">
<span class="label rel">[
<span class="apice apM">]</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par toshow" data-val="{" data-long="}" data-longtap="1">
<span class="label rel">{
<span class="apice apM">}</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="%">
<span class="label">%</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="sin(" data-alert="1">
<span class="label">sin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="cos(" data-alert="1">
<span class="label">cos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="tan(" data-alert="1">
<span class="label">tan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="e">
<span class="label">e</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="asin(" data-alert="1">
<span class="label">asin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="acos(" data-alert="1">
<span class="label">acos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="atan(" data-alert="1">
<span class="label">atan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="π">
<span class="label">π</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^2">
<span class="label rel">x
<span class="apice">2</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^">
<span class="label rel">y
<span class="apice">x</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini second ui-el" data-val="log(" data-alert="1">
<span class="label">log</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="!">
<span class="label">x!</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert second ui-el" data-val="sqrt(" data-alert="1">
<span class="label">√</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="root(" data-alert="1">
<span class="label rel">
<span class="apice rad">x</span>√</span>
</a>
</td>
<td colspan="2">
<button id="math-button1" ion-button="" class="buttn insert mini second ui-el" block="" href-inappbrowser="page7">
Tools
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="info-page scrollable">
<div class="page-content page">
<div class="section border">
<
<div class="clear"></div>
<h2 class="left">calculator</h2>
<div class="clear"></div>
<p class="subtitle" data-l10n-id="SubTitleApp">
Simple and powerful scientific calculator
</p>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMemory">Memory</span>
</div>
<div class="row">M
<span class="ugul">=</span>
<span data-l10n-id="M-symbol">write into memory</span>
</div>
<div class="row">Mr
<span class="ugul">=</span>
<span data-l10n-id="Mr-symbol">read from memory</span>
</div>
<div class="row">M
<span class="apice_">×</span>
<span class="ugul">=</span>
<span data-l10n-id="M-symbol-cross">Tap&Hold, clear memory</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleHistory">History</span>
</div>
<div class="row">↑ ↓
<span class="ugul">=</span>
<span data-l10n-id="History-swipe">swipe up/down on calc bar</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMath">Math</span>
</div>
<div class="row">
<span class="apice_">2</span>√
<span class="ugul">=</span> sqrt()</div>
<div class="row">
<span class="apice_">x</span>√
<span class="ugul">=</span>
<span class="pedice">x</span>root()</div>
<div class="row">x
<span class="apice_">y</span>
<span class="ugul">=</span> x^y</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleSymbols">Symbols</span>
</div>
<div class="row text">
) ] } =
<span data-l10n-id="TapAndHold">Tap&Hold</span> ( [ {
</div>
</div>
</div>
<div class="section ">
<div class="speg">
<div class="row text" data-l10n-id="DeleteAll">
Delete all = Tap&Hold delete button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thank's in advance!!! :)

Related

Changing innerHTML of importedNode

I want to replace a string inside a template. It is already working, but I want to change it inside the importedNode and not inside the complete table.
I did not find a way to change the innerHTML of theimportTemplate.
let template = document.querySelector('#templateRow');
// add to document DOM
let importTemplate = document.importNode(template.content, true); // where true means deep copy
console.log(importTemplate);
table.appendChild(importTemplate);
console.log(table);
table.innerHTML = table.innerHTML.replaceAll("[i]", this.uid)
<template id="templateRow">
<tr id="row_[i]">
<td><i class="icon fa-sharp fa-solid fa-plus"></i></td>
<td id="name_[i]"></td>
<td id="mode_[i]"></td>
<td id="state_[i]"></td>
</tr>
<tr>
<td style="display: none;"></td>
<td style="display: none;" colspan="4">
<div id="columns_[i]" class="columns">
<div id="[i]_column_1" class="column"><button id="btnRemove_[i]" class="button is-danger is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-trash pr-2"></i></span><span>Remove</span></span></button></div>
<div id="[i]_column_2" class="column">
<button id="btnEnable_[i]" class="button is-success is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-play pr-2"></i></span><span>Enable</span></span></button>
<button id="btnDisable_[i]" class="button is-info is-small is-hidden"><span class="icon-is-small"><span><i
class="fa-solid fa-stop pr-2"></i></span><span>Disable</span></span></button>
</div>
<div id="[i]_column_3" class="column"><button id="btnDownload_[i]" class="button is-primary is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-download pr-2"></i></span><span>Download</span></span></button>
</div>
<div id="[i]_column_4" class="column">
<p id="[i]_p_1">Hash: <span id="hash_[i]"></span></p>
</div>
<div id="[i]_column_5" class="column">
<p id="[i]_p_2">Port: <span id="port_[i]"></span></p>
</div>
<div id="[i]_column_6" class="column">
<p id="[i]_p_3"><span id="rxbytes_[i]"></span></p>
</div>
</div>
</td>
</tr>
</template>

Replace specific field in table using Jquery

In this table :
$('#listview-table tr').each(function() {
var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();
alert(status_id);
});
<table id="listview-table" class="table listview-table " style="table-layout: fixed;">
ass="overflow-y">
<tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&view=Detail&record=26322&app=INVENTORY" id="Liens_listView_row_1">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26322" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26322" href="index.php?module=Liens&view=Detail&record=26322&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26322&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-26263-BRETAGNE</span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
<span class="fieldValue">
<span class="value"> 185.169.242.136 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
<span class="fieldValue">
<span class="value"> 0 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
<span class="fieldValue">
<span class="value"></span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">40</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
<tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&view=Detail&record=26284&app=INVENTORY" id="Liens_listView_row_2">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26284" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26284" href="index.php?module=Liens&view=Detail&record=26284&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26284&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-640-EUROPE </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
<span class="fieldValue">
<span class="value"> 192.42.221.11 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
<span class="fieldValue">
<span class="value"> 1 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
<span class="fieldValue">
<span class="value"> 5424954 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">39</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
</tbody>
</table>
I try to replace each field with data-name="cf_1525" containing 0 or 1, by Down or UP.
But I didn't know how can I select this and them replace it.
I tried this code, but it doesn't select :
$('#listview-table tr').each(function() {
var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();
alert(status_id);
});
Many thanks for your help !

That code you are trying to use to loop through the table rows, find a given element and do something with that data, should be more like this:
$('#listview-table tr').each(function() {
var status_id = $(this).find("[data-name~='cf_1525'].listViewEntryValue").text();
console.log(status_id);
});
The find() function will filter the children elements having those given conditions: the attribute data-name containing the word cf_1525 and the class listViewEntryValue.
Plus for diagnostics purposes, both original value and transformed value get printed on console for each single row processed. And I added a css class that will better highlight that table cell (of course just remove the css rule to style it as default)
Then following your words:
I try to replace each field with data-name="cf_1525" containing 0 or
1, by Down or UP.
That value gets transformed to Up if it was 1 and to Down if it was 1. Otherwise the value will remain untouched. Such value gets set both on the contents and on data-rawvalue attribute.
This is the whole demo (but using the required assets):
$('#listview-table tr').each(function() {
const el = $(this).find("[data-name~='cf_1525'].listViewEntryValue");
var status_id = el.text().trim();
let transformedValue = status_id;
if (status_id == '0')
transformedValue = 'Down';
else if (status_id == '1')
transformedValue = 'Up';
//updates the data-rawvalue attribute
el[0].dataset.rawvalue = transformedValue;
//updates the text content
el.find('.fieldValue > .value').text(transformedValue);
console.log(`original:"${status_id}" transformed:"${transformedValue}"`);
});
[data-name~='cf_1525'].listViewEntryValue {
color: red;
font-weight: 600;
border: solid 4px gray;
padding: 0 1rem;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table id="listview-table" class="table listview-table " style="table-layout: fixed;">
<tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&view=Detail&record=26322&app=INVENTORY" id="Liens_listView_row_1">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26322" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26322" href="index.php?module=Liens&view=Detail&record=26322&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26322&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-26263-BRETAGNE</span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
<span class="fieldValue">
<span class="value"> 185.169.242.136 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
<span class="fieldValue">
<span class="value"> 0 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
<span class="fieldValue">
<span class="value"></span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">40</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
<tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&view=Detail&record=26284&app=INVENTORY" id="Liens_listView_row_2">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26284" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26284" href="index.php?module=Liens&view=Detail&record=26284&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26284&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-640-EUROPE </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
<span class="fieldValue">
<span class="value"> 192.42.221.11 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
<span class="fieldValue">
<span class="value"> 1 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
<span class="fieldValue">
<span class="value"> 5424954 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">39</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
</tbody>
</table>

Javascript for filterable table on Cordova Android build?

Any help massively appreciated as I am stuck!
In short, I have a filterable table on a Cordova build for Android. Works fine when testing on PC, but when build by Cordova into Android app, the filterable table does not work.
When a search input is entered, nothing happens.
The code is below, as you can see I think I have the correct META tags in place... really unsure why this isnt working within the build when other Javascript works no problme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<title>Officerr</title>
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="fonts/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link data-pwa-version="set_in_manifest_and_pwa_js" href="_manifest.json" rel="manifest">
<link href="app/icons/icon-192x192.png" rel="apple-touch-icon" sizes="180x180">
</head>
<body class="theme-light" data-gradient="body-default" data-highlight="highlight-red">
<div id="preloader">
<div class="spinner-border color-highlight" role="status">
</div>
</div>
<div id="page">
<div class="header header-fixed header-logo-center">
<a class="header-title" href="#">Categories</a> <a class="header-icon header-icon-1" data-back-button="" href="#"><i class="fas fa-arrow-left"></i></a>
</div>
<div id="footer-bar" class="footer-bar-1">
<i class="fa fa-search"></i><span>Search</span>
<i class="fa fa-gavel"></i><span>Categories</span>
<i class="fa fa-briefcase"></i><span>A-Z</span>
<i class="fa fa-user"></i><span>Directory</span>
<i class="fa fa-info"></i><span>Info</span>
</div>
<div class="page-content header-clear-medium">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
<table id="myTable">
<tr class="header1"><td>A</td></tr>
<tr>
<td><b>Aide Memoires</b>
</td>
</tr>
<tr>
<td><b>Animals</b>
</td>
</tr>
<tr>
<td><b>Armed Forces</b>
</td>
</tr>
<tr>
<td><b>Assault</b>
</td>
</tr>
<tr class="header1"><td>B</td></tr>
<tr class="header1"><td>C</td></tr>
<tr>
<td><b>Children</b>
</td>
</tr>
<tr>
<td><b>Criminal Damage</b>
</td>
</tr>
<tr class="header1"><td>D</td></tr>
<tr>
<td><b>Drugs</b>
</td>
</tr>
<tr class="header1"><td>E</td></tr>
<tr>
<td><b>Environment</b>
</td>
</tr>
<tr class="header1"><td>F</td></tr>
<tr>
<td><b>Firearms</b>
</td>
</tr>
<tr>
<td><b>Fireworks</b>
</td>
</tr>
<tr>
<td><b>Fraud</b>
</td>
</tr>
<tr class="header1"><td>G</td></tr>
<tr class="header1"><td>H</td></tr>
<tr>
<td><b>Harassment</b>
</td>
</tr>
<tr>
<td><b>Human Rights</b>
</td>
<tr class="header1"><td>I</td></tr>
<tr>
<td><b>Immigration</b>
</td>
</tr>
<tr class="header1"><td>J</td></tr>
<tr class="header1"><td>K</td></tr>
<tr class="header1"><td>L</td></tr>
<tr class="header1"><td>M</td></tr>
<tr>
<td><b>Mental Health</b>
</td>
</tr>
<tr class="header1"><td>N</td></tr>
<tr class="header1"><td>O</td></tr>
<tr class="header1"><td>P</td></tr>
<tr>
<td><b>PACE</b>
</td>
</tr>
<tr>
<td><b>Police & Courts</b>
</td>
</tr>
<tr>
<td><b>Public Order</b>
</td>
</tr>
<tr class="header1"><td>Q</td></tr>
<tr class="header1"><td>R</td></tr>
<tr>
<td><b>Railway Offences</b>
</td>
</tr>
<tr class="header1"><td>S</td></tr>
<tr>
<td><b>Sexual Offences</b>
</td>
</tr>
<tr>
<td><b>Sporting Offences</b>
</td>
</tr>
<tr>
<td><b>Stop & Search</b>
</td>
</tr>
<tr class="header1"><td>T</td></tr>
<tr>
<td><b>Terrorism</b>
</td>
</tr>
<tr>
<td><b>Theft</b>
</td>
</tr>
<tr>
<td><b>Traffic</b>
</td>
</tr>
<tr class="header1"><td>U</td></tr>
<tr>
<td><b>Use of Force</b>
</td>
</tr>
<tr class="header1"><td>V</td></tr>
<tr class="header1"><td>W</td></tr>
<tr>
<td><b>Weapons & Bladed Articles</b>
</td>
</tr>
<tr class="header1"><td>X</td></tr>
<tr class="header1"><td>Y</td></tr>
<tr class="header1"><td>Z</td></tr>
</table>
</div>
<!-- End of Page Content-->
<!-- All Menus, Action Sheets, Modals, Notifications, Toasts, Snackbars get Placed outside the <div class="page-content"> -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-settings">
<div class="menu-title mt-0 pt-0">
<h1>Settings</h1>
<p class="color-highlight">Flexible and Easy to Use</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="list-group list-custom-small">
<a class="pb-2 ms-n1" data-toggle-theme="" data-trigger-switch="switch-dark-mode" href="#"><i class="fa font-12 fa-moon rounded-s bg-highlight color-white me-3"></i> <span>Dark Mode</span></a>
<div class="custom-control scale-switch ios-switch">
<input class="ios-input" data-toggle-theme="" id="switch-dark-mode" type="checkbox"> <label class="custom-control-label" for="switch-dark-mode"></label>
</div>
<i class="fa fa-angle-right"></i>
</div>
<div class="list-group list-custom-large">
<a data-menu="menu-highlights" href="#"><i class="fa font-14 fa-tint bg-green-dark rounded-s"></i> <span>Page Highlight</span> <strong>16 Colors Highlights Included</strong> <span class="badge bg-highlight color-white">HOT</span> <i class="fa fa-angle-right"></i></a> <a class="border-0" data-menu="menu-backgrounds" href="#"><i class="fa font-14 fa-cog bg-blue-dark rounded-s"></i> <span>Background Color</span> <strong>10 Page Gradients Included</strong> <span class="badge bg-highlight color-white">NEW</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Menu Settings Highlights-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-highlights">
<div class="menu-title">
<h1>Highlights</h1>
<p class="color-highlight">Any Element can have a Highlight Color</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="highlight-changer">
<a data-change-highlight="blue" href="#"><i class="fa fa-circle color-blue-dark"></i><span class="color-blue-light">Default</span></a> <a data-change-highlight="red" href="#"><i class="fa fa-circle color-red-dark"></i><span class="color-red-light">Red</span></a> <a data-change-highlight="orange" href="#"><i class="fa fa-circle color-orange-dark"></i><span class="color-orange-light">Orange</span></a> <a data-change-highlight="pink2" href="#"><i class="fa fa-circle color-pink2-dark"></i><span class="color-pink-dark">Pink</span></a> <a data-change-highlight="magenta" href="#"><i class="fa fa-circle color-magenta-dark"></i><span class="color-magenta-light">Purple</span></a> <a data-change-highlight="aqua" href="#"><i class="fa fa-circle color-aqua-dark"></i><span class="color-aqua-light">Aqua</span></a> <a data-change-highlight="teal" href="#"><i class="fa fa-circle color-teal-dark"></i><span class="color-teal-light">Teal</span></a> <a data-change-highlight="mint" href="#"><i class="fa fa-circle color-mint-dark"></i><span class="color-mint-light">Mint</span></a> <a data-change-highlight="green" href="#"><i class="fa fa-circle color-green-light"></i><span class="color-green-light">Green</span></a> <a data-change-highlight="grass" href="#"><i class="fa fa-circle color-green-dark"></i><span class="color-green-dark">Grass</span></a> <a data-change-highlight="sunny" href="#"><i class="fa fa-circle color-yellow-light"></i><span class="color-yellow-light">Sunny</span></a> <a data-change-highlight="yellow" href="#"><i class="fa fa-circle color-yellow-dark"></i><span class="color-yellow-light">Goldish</span></a> <a data-change-highlight="brown" href="#"><i class="fa fa-circle color-brown-dark"></i><span class="color-brown-light">Wood</span></a> <a data-change-highlight="night" href="#"><i class="fa fa-circle color-dark-dark"></i><span class="color-dark-light">Night</span></a> <a data-change-highlight="dark" href="#"><i class="fa fa-circle color-dark-light"></i><span class="color-dark-light">Dark</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Settings Backgrounds-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-backgrounds">
<div class="menu-title">
<h1>Backgrounds</h1>
<p class="color-highlight">Change Page Color Behind Content Boxes</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="background-changer">
<a data-change-background="default" href="#"><i class="bg-theme"></i><span class="color-dark-dark">Default</span></a> <a data-change-background="plum" href="#"><i class="body-plum"></i><span class="color-plum-dark">Plum</span></a> <a data-change-background="magenta" href="#"><i class="body-magenta"></i><span class="color-dark-dark">Magenta</span></a> <a data-change-background="dark" href="#"><i class="body-dark"></i><span class="color-dark-dark">Dark</span></a> <a data-change-background="violet" href="#"><i class="body-violet"></i><span class="color-violet-dark">Violet</span></a> <a data-change-background="red" href="#"><i class="body-red"></i><span class="color-red-dark">Red</span></a> <a data-change-background="green" href="#"><i class="body-green"></i><span class="color-green-dark">Green</span></a> <a data-change-background="sky" href="#"><i class="body-sky"></i><span class="color-sky-dark">Sky</span></a> <a data-change-background="orange" href="#"><i class="body-orange"></i><span class="color-orange-dark">Orange</span></a> <a data-change-background="yellow" href="#"><i class="body-yellow"></i><span class="color-yellow-dark">Yellow</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Share -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-share">
<div class="menu-title mt-n1">
<h1>Share the Love</h1>
<p class="color-highlight">Just Tap the Social Icon. We'll add the Link</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="content mb-0">
<div class="divider mb-0">
</div>
<div class="list-group list-custom-small list-icon-0">
<a class="shareToFacebook external-link" href="auto_generated"><i class="font-18 fab fa-facebook-square color-facebook"></i> <span class="font-13">Facebook</span> <i class="fa fa-angle-right"></i></a> <a class="shareToTwitter external-link" href="auto_generated"><i class="font-18 fab fa-twitter-square color-twitter"></i> <span class="font-13">Twitter</span> <i class="fa fa-angle-right"></i></a> <a class="shareToLinkedIn external-link" href="auto_generated"><i class="font-18 fab fa-linkedin color-linkedin"></i> <span class="font-13">LinkedIn</span> <i class="fa fa-angle-right"></i></a> <a class="shareToWhatsApp external-link" href="auto_generated"><i class="font-18 fab fa-whatsapp-square color-whatsapp"></i> <span class="font-13">WhatsApp</span> <i class="fa fa-angle-right"></i></a> <a class="shareToMail external-link border-0" href="auto_generated"><i class="font-18 fa fa-envelope-square color-mail"></i> <span class="font-13">Email</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Be sure this is on your main visiting page, for example, the index.html page-->
<!-- Install Prompt for Android -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-android">
<div class="boxed-text-l mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p>Install Sticky on your home screen, and access it just like a regular app. It really is that simple!</p>
<a class="pwa-install btn btn-s rounded-s shadow-l text-uppercase font-900 bg-highlight mb-2" href="#">Add to Home Screen</a><br>
<a class="pwa-dismiss close-menu color-gray-dark text-uppercase font-900 opacity-60 font-10 pt-2" href="#">Maybe later</a>
<div class="clear">
</div>
</div>
</div>
<!-- Install instructions for iOS -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-ios">
<div class="boxed-text-xl mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p class="mb-0 pb-0">Install Sticky, and access it like a regular app. Open your Safari menu and tap "Add to Home Screen".</p>
<div class="clearfix pt-3">
</div>
<a class="pwa-dismiss close-menu color-highlight text-uppercase font-700" href="#">Maybe later</a>
</div>
</div>
</div>
<script src="cordova.js" type="text/javascript">
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script type="text/javascript">
var deviceReady = function(){
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
}
document.addEventListener('deviceready', deviceReady, false);
</script>
<script src="scripts/bootstrap.min.js">
</script>
<script src="scripts/custom.js">
</script>
</body>
</html>

placing ng-table pagination after <div id="test1">

I have created an angularjs application using ng-table with customized pagination template. The application is working fine but the issue is that I want the pagination to be appeared after a <div id="test1">.
My code is as given below, can anyone please tell me some solution for this
Working JSFiddle
html
<div ng-app="main" ng-controller="DemoCtrl">
<table class="table" ng-table="tableParams" template-pagination="custom/pager" border="1">
<thead>
<tr>
<th sortable="'name'">NUMBER</th>
<th sortable="'age'">STATUS</th>
<th sortable="'role'">LOB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in $data| filter:searchPolicies">
<td><span ng-bind="user.name"></span>
</td>
<td><span ng-bind="user.age"></span>
</td>
<td><span ng-bind="user.role"></span>
</td>
</tr>
</tbody>
</table>
<div id="test1">some data</div>
<script type="text/ng-template" id="custom/pager">
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
</div>
script
$scope.tableParams = new ngTableParams({
page: 1,
count: 5, // count per page
sorting: {
name: "asc"
}
}, {
counts: [],
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
params.total(data.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

Assuming the div you want between the table and pagination isn't too large, you could just add it to the beginning of the pagination script.
i.e.
<script type="text/ng-template" id="custom/pager">
<div id="test1">some data</div>
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
Updated JSFiddle

how to find a li that cointes certain text and hide him and also the next parent sibiling?

i have a HTML code:
<li class="item first">
<a class="product-image" title="מדפסת Epson LQ-690" href="http://adcs.gostorego.com/mdpst-epson-lq-690.html">
<img width="135" height="135" alt="מדפסת Epson LQ-690" src="http://s5169dbdce2040.img.gostorego.com/809E82/cdn/media/s5/16/9d/bd/ce/20/40/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
</a>
<h3 class="product-name">
<a title="מדפסת Epson LQ-690" href="http://adcs.gostorego.com/mdpst-epson-lq-690.html">מדפסת Epson LQ-690</a>
</h3>
<div class="price-box">
<span id="product-price-96-widget-new-grid" class="regular-price">
<span class="price" style="display: inline;">0.00 ₪</span>
</span>
</div>
<div class="actions" style="display: block;">
<button class="button btn-cart" onclick="setLocation('http://adcs.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/product/96/')" title="הוסף לסל" type="button">
<span>
<span>הוסף לסל</span>
</span>
</button>
<ul class="add-to-links">
<li>
<span class="separator">|</span>
<a class="link-compare" href="http://adcs.gostorego.com/catalog/product_compare/add/product/96/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/">הוסף להשוואה</a>
</li>
</ul>
</div>
</li>
<li class="item">
<a class="product-image" title="מתג HP 1910-48G Switch" href="http://adcs.gostorego.com/mtg-hp-1910-48g-switch.html">
<img width="135" height="135" alt="מתג HP 1910-48G Switch" src="http://s5169dbdce2040.img.gostorego.com/809E82/cdn/media/s5/16/9d/bd/ce/20/40/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
</a>
<h3 class="product-name">
<a title="מתג HP 1910-48G Switch" href="http://adcs.gostorego.com/mtg-hp-1910-48g-switch.html">מתג HP 1910-48G Switch</a>
</h3>
<div class="price-box">
<span id="product-price-109-widget-new-grid" class="regular-price">
<span class="price">2,431.00 ₪</span>
</span>
</div>
<div class="actions" style="display: block;">
<button class="button btn-cart" onclick="setLocation('http://adcs.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/product/109/')" title="הוסף לסל" type="button">
<span>
<span>הוסף לסל</span>
</span>
</button>
<ul class="add-to-links">
<li>
<span class="separator">|</span>
<a class="link-compare" href="http://adcs.gostorego.com/catalog/product_compare/add/product/109/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/">הוסף להשוואה</a>
</li>
</ul>
</div>
</li>
<li class="item">
<a class="product-image" title="מתג HP E2510-48 Switch" href="http://adcs.gostorego.com/mtg-hp-e2510-48-switch.html">
<img width="135" height="135" alt="מתג HP E2510-48 Switch" src="http://s5169dbdce2040.img.gostorego.com/809E82/cdn/media/s5/16/9d/bd/ce/20/40/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
</a>
<h3 class="product-name">
<a title="מתג HP E2510-48 Switch" href="http://adcs.gostorego.com/mtg-hp-e2510-48-switch.html">מתג HP E2510-48 Switch</a>
</h3>
<div class="price-box">
<span id="product-price-110-widget-new-grid" class="regular-price">
<span class="price" style="display: inline;">0.00 ₪</span>
</span>
</div>
<div class="actions" style="display: block;">
<button class="button btn-cart" onclick="setLocation('http://adcs.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/product/110/')" title="הוסף לסל" type="button">
<span>
<span>הוסף לסל</span>
</span>
</button>
<ul class="add-to-links">
<li>
<span class="separator">|</span>
<a class="link-compare" href="http://adcs.gostorego.com/catalog/product_compare/add/product/110/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/">הוסף להשוואה</a>
</li>
</ul>
</div>
</li>
<li class="item last">
<a class="product-image" title="מתג HP E2510-24G Switch" href="http://adcs.gostorego.com/mtg-hp-e2510-24g-switch.html">
<img width="135" height="135" alt="מתג HP E2510-24G Switch" src="http://s5169dbdce2040.img.gostorego.com/809E82/cdn/media/s5/16/9d/bd/ce/20/40/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
</a>
<h3 class="product-name">
<a title="מתג HP E2510-24G Switch" href="http://adcs.gostorego.com/mtg-hp-e2510-24g-switch.html">מתג HP E2510-24G Switch</a>
</h3>
<div class="price-box">
<span id="product-price-111-widget-new-grid" class="regular-price">
<span class="price">2,696.00 ₪</span>
</span>
</div>
<div class="actions" style="display: block;">
<button class="button btn-cart" onclick="setLocation('http://adcs.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/product/111/')" title="הוסף לסל" type="button">
<span>
<span>הוסף לסל</span>
</span>
</button>
<ul class="add-to-links">
<li>
<span class="separator">|</span>
<a class="link-compare" href="http://adcs.gostorego.com/catalog/product_compare/add/product/111/uenc/aHR0cDovL2FkY3MuZ29zdG9yZWdvLmNvbS8,/">הוסף להשוואה</a>
</li>
</ul>
</div>
</li>
</ul>
now i want to find inside each li if the the price class contains = 0.00.
if it true so hide class price and also hide the div class actions.
this is my jQuery code:
$j('.item').each(function(){
if($j(this).find(".price:contains('0.00')")){
$j(this).find(".price:contains('0.00')").hide();
$j(this).find(".actions").hide();
}
});
when doing this code it is hiding the price if it's 0.00
but when hiding the .actions it hiding all the .actions in all li obviously,
but agian i want only to hide the .price if its 0.00 and its .actions

Try this
$('.item').each(function () {
var zeroPrice = $(this).find(".price:contains('0.00')");
if (zeroPrice.length > 0) {
zeroPrice.hide();
$(this).find(".actions").hide();
}
});

Categories

Resources