I have a wordBox Where user will drag touch and drag to select words.
I am using touchmove eventlistener to change background/color of the word in wordBox. But touchmove only changing color/background of the text from where it started.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
function select(evt) {
var id = this.id;
document.getElementById(this.id).style.background = "#ffffff";
document.getElementById(this.id).style.color = "#0070C4";
for (var i = 0; i < spans.length; i++) {
mouseMove = spans[i].addEventListener("touchmove", function(sp) {
document.getElementById(sp.toElement.id).style.background = "#ffffff";
document.getElementById(sp.toElement.id).style.color = "#0070C4";
});
}
}
function start() {
//GENERATE RANDOM WORDBOX
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchmove", select);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
JSFIDDLE
I also tried mouse events but getting desired results. How can i achieve this?
Use Document.elementFromPoint() with clientX and clientY to select the current element
The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
var started = false;
function clearAll() {
started = true;
for (var i = 0; i < spans.length; i++) {
spans[i].style.background = "";
spans[i].style.color = "";
}
}
function select(e) {
e.preventDefault();
if (started) {
var changedTouch = e.changedTouches[0];
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
if (elem.tagName === 'SPAN') { //this condition could also be more accurate based on your specificity of the element
elem.style.background = "#ffffff";
elem.style.color = "#0070C4";
}
}
}
function mouseMoveHandler(e) {
e.preventDefault();
if (started) {
this.style.background = "#ffffff";
this.style.color = "#0070C4";
}
}
function reset() {
started = false;
}
function start() {
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchstart", clearAll);
spans[i].addEventListener("mousedown", clearAll);
spans[i].addEventListener("touchmove", select);
spans[i].addEventListener("mousemove", mouseMoveHandler);
spans[i].addEventListener("touchend", reset);
spans[i].addEventListener("mouseup", reset);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'>></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
Fiddle Demo
A note of caution for clientX / clientY and document.elementFromPoint – clientX is normally the distance to the viewport, excluding the scroll offset. elementFromPoint uses the same position reference. Chrome on Android (version 50.0.2661.89) positions appear to include the scroll offset. The Internet browser on Android and Safari on iOS appear to use the correct reference point. Desktop browsers (Chrome, Firefox, IE9 & up, Edge, and Safari) appear to also use the correct reference point.
If you’re just using clientX and elementFromPoint, there shouldn’t be any issue as the same reference point is being used. I ran into trouble as I was adding the offset back in to position a new element. It worked fine until I zoomed the display on an Android phone and shifted the display towards the left. My new element was positioned correctly on most browsers, but not on Chrome on Android.
Related
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>
I have used this method with or without area-bounding-box so please tell how to get the count classes with name item-box item-box-active
Javascript
function next() {
elementarray = document.querySelectorAll('#area-bounding-box .item-box item-box-active');
if (elementarray.length === 0) {
document.getElementById("btCount").innerHTML = "5";
} else {
document.getElementById("btCount").innerHTML = "2";
}
arr.push(elementarray.length);
console.log(arr);
}
HTML
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
<div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
<span class="icon-resize icon-resize-tl"></span>
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
<span class="icon-resize icon-resize-tl">
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
</div>
Do not use the space between **.item-box item-box-active**, replace it with .
elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
Also notice that area-bounding-box is a class.
Demo
var elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
console.log( elementarray.length )
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg?…;" style=" visibility: visible; ">
<div class="item-box item-box-active item-box-editing " data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c " style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%; ">
<span class="icon-resize icon-resize-tl "></span>
<div class="area-move "></div>
<div class="area-btns ">
<a class="btn btn-delete " href="# ">
<i class="fa fa-times " aria-hidden="true "></i>
</a>
</div>
<div class="item-box item-box-active item-box-editing " data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9 " style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%; ">
<span class="icon-resize icon-resize-tl ">
<div class="area-move "></div>
<div class="area-btns ">
<a class="btn btn-delete " href="# ">
<i class="fa fa-times " aria-hidden="true "></i>
</a>
</div>
</span>
</div>
</div>
</div>
You can use jQuery to find.
https://api.jquery.com/find/
Example: $('.item-box item-box-active').find()
$(document).ready(function() {
var arrLength = [];
var eleLength = $(".item-box.item-box-active").length;
//var eleLength = $(".area-bounding-box .item-box.item-box-active").length;
console.log("length", eleLength);
if (eleLength === 0) {
$(".btnCount").html("5");
} else {
$(".btnCount").html("2");
}
arrLength.push(eleLength);
console.log(arrLength);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
<div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
<span class="icon-resize icon-resize-tl"></span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
<span class="icon-resize icon-resize-tl">
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="btnCount">
</div>
<div class="area-bounding-box" style="margin-top: 87.5px;">
<div class="item-box item-box-active item-box-editing" data-uuid="9fbc2435-d87d-418f-83fa-580c3841955a" style="top: 4.47%; left: 11.57%; width: 18.42%; height: 39.42%;"><span class="icon-resize icon-resize-tl">
</span><span class="icon-resize icon-resize-br"></span>
<span class="icon-resize icon-resize-tr"></span>
<span class="icon-resize icon-resize-bl"></span>
<span class="icon-resize icon-resize-t"></span>
<span class="icon-resize icon-resize-b"></span>
<span class="icon-resize icon-resize-l"></span>
<span class="icon-resize icon-resize-r"></span>
<div class="area-move"></div><div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
<div class="item-box item-box-active" data-uuid="78b14a5a-49b9-419d-9a90-fea9312b8029" style="top: 8.85%; left: 34.14%; width: 24.42%; height: 53.52%;">
<span class="icon-resize icon-resize-tl">
</span>
<span class="icon-resize icon-resize-br">
</span>
<span class="icon-resize icon-resize-tr">
</span>
<span class="icon-resize icon-resize-bl">
</span>
<span class="icon-resize icon-resize-t">
</span>
<span class="icon-resize icon-resize-b">
</span>
<span class="icon-resize icon-resize-l">
</span>
<span class="icon-resize icon-resize-r">
</span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="7c143202-b7db-4515-9be0-c60be4249bd6" style="top: 17.42%; left: 72.28%; width: 21%; height: 45.71%;">
<span class="icon-resize icon-resize-tl">
</span>
<span class="icon-resize icon-resize-br">
</span>
<span class="icon-resize icon-resize-tr">
</span>
<span class="icon-resize icon-resize-bl">
</span>
<span class="icon-resize icon-resize-t">
</span>
<span class="icon-resize icon-resize-b">
</span>
<span class="icon-resize icon-resize-l">
</span>
<span class="icon-resize icon-resize-r">
</span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
(function() {
'use strict';
$("body").prepend ( `
<button id="btCount">Box Count</button>
<button id="btReset">Reset</button>
<div></div>`);
var arr = [];
var boxCount;
var sum;
var elementarray;
var nodeList;
document.getElementById("btCount").onclick = function() { funAlert();};
$('#btnNext').click( function(){
next();
});
$('#btnSkip').click( function(){
skip();
});
$('#btnPrev').click( function(){
prev();
});
$('#btnSubmit').click( function(){
funAlert();
});
function next(){
var elementarray = $(".item-box.item-box-active").length;
console.log("length", elementarray);
if (elementarray === 0) {
$(".btCount").html("5");
} else {
$(".btCount").html("2");
}
arr.push(elementarray);
console.log(arr);
}
Through this:
var all = $("#innerhtml").map(function() {
return this.innerHTML;
}).get();
alert(all);
I find:
<a class="cart-btn remove text-muted small" onclick="removeCart('fgh', 'ser');"><i class="fa fa-minus-circle"></i></a>
<a class="name-image" >
<span class="name">
<span class="quantity">28 × </span>rum ‘n’ beat</span>
</a>
<p class="comment-amount">
<span class="amount pull-right">kr3,584.00</span>
</p>
How can i get this in to a jQuery variable..
You can use Jquery attr().
var result = $('.cart-btn').attr("onclick")
console.log(result);
var re = /'(.*?)'/g;
var [a,b,c] = result.match(re);
console.log(a, b, c);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cart-btn remove text-muted small" onclick="removeCart('89', '7647966b7343c29048673252e490f736', '0');"><i class="fa fa-minus-circle"></i></a>
<a class="name-image" onclick="openMenuOptions('89', '7647966b7343c29048673252e490f736');">
<span class="name">
<span class="quantity">28 × </span>rum ‘n’ beat</span>
</a>
<p class="comment-amount">
<span class="amount pull-right">kr3,584.00</span>
</p>
Help me click a star
Load a page:
<div class="game-rating" data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 1 :
<div class="game-rating rate-1 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 2 :
<div class="game-rating rate-2 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
star 1 ,2,3,4,5 I have click auto a star 1 can you help me create a
script to tampermonkey ? or javascript ?**
Sorry my bad english
I have a repeating container with a few span elements. I would like to remove two, and re-arrange one of the elements as the example below. I started with something like this:
$('span.class5').insertBefore('span.class0');
This added each span.class5 found on page inside each repeating container, so that didn't work.. How do I do this best with jQuery?
HTML:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class1"></span>
<span class="class2"></span>
<span class="class3"></span>
</div>
<div class="group">
<span class="class4"></span>
<span class="class5"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
Rearrange to:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class5"></span>
<span class="class1"></span>
<span class="class2"></span> = remove
<span class="class3"></span> = remove
</div>
<div class="group">
<span class="class4"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
One solution possible :
( with jQuery)
// I would like to remove two
$('.class2 , .class3' , '.group').remove();
//This added each span.class5 found on page inside each repeating container
$('span.class5').each(function(){
var $el = $(this);
var $father = $el.parents('.container');
// if you don't want to use a class for the container
// decomment line under
//var $father = $el.parent().parent();
$el.insertAfter($father.find('.class0'))
});
span{
border : solid 1px #EEE;
display : inline-block;
padding : 3px;
margin : 3px;
}
.container{
border : solid 1px #CCC;
padding 3px;
margin : 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
You could use the parent > child selector to restrict operations to a specific container:
function rearrange(num) {
$('.container' + num + ' > .group > .class2').remove();
$('.container' + num + ' > .group > .class3').remove();
$('.container' + num + ' > .group > .class5').insertBefore($('.container' + num + ' > .group > .class0'));
}
.group {
background-color: lightgray;
margin: 4px
}
.group span {
margin: 3px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(1)">Rearrange</button>
</div>
<div class="container2">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(2)">Rearrange</button>
</div>