We Keep Coding

How to move the cursor only to the text present inside multiple span tags with left and right arrow key

Can you please help me to write a logic to move the cursor only to the text in a content editable div. Here <span id="katexdivspanidcount_3" has multiple tags so when I try to move the cursor with left or right arrow it is not immediately jumping to the text
<div id="katexrendercontent" contenteditable="" role="textbox" class="form-control"
style="min-height: 100px;padding-left: 5px;padding-right: 5px;font-size: 22px;">
<span id="katexdivspanidcount_1">a</span>
<span id="katexdivspanidcount_2">b</span>
<span id="katexdivspanidcount_3">
<span class="katexmainsupsub" id="katexmainsubsup_0">
<span class="katex-display">
<span class="katex">
<span class="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<semantics>
<mrow>
<msubsup>
<mi>t</mi>
<mn>2</mn>
<mn>3</mn>
</msubsup>
</mrow>
<annotation encoding="application/x-tex">\htmlClass{subsupercount_0
subsupercls}{t_{2}^{3}}</annotation>
</semantics>
</math>
</span>
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height:1.1111em;vertical-align:-0.247em;"></span>
<span class="enclosing subsupercount_0 subsupercls">
<span class="mord">
<span class="mord mathnormal mainchar">t</span>
<span class="msupsub">
<span class="vlist-t vlist-t2">
<span class="vlist-r">
<span class="vlist" style="height:0.8641em;">
<span style="top:-2.12em;margin-left:0em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mtight">
<span class="mord mtight subsup">2</span>
</span>
</span>
</span>
<span style="top:-3.3em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mtight">
<span class="mord mtight subsup">3</span>
</span>
</span>
</span>
</span>
<span class="vlist-s">&ZeroWidthSpace;</span>
</span>
<span class="vlist-r">
<span class="vlist" style="height:0.247em;">
<span></span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span id="katexdivspanidcount_4">c</span>
</div>

why nextelementsibling return null | dom traversing js

when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...
Edit
you can nest any elements inside an <a> except the following :
<a>
<button>
follow link
<a> and<button> both are invalid..
but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...
if I console log console.log(document.links) .. it's give three HTMLCollection collection...
End Edit
Below Example Code
console.log(document.links)
document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {
item.addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);
}
})
})
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<button>
button tag
</button>
<a class="inlineBlock" href="" download>
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</a>
</li>

Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<span>
span tag
</span>
</a>
<a class="inlineBlock" href="" download="">
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</li>
You can get this information for yourself by copying the HTML from your browser's DOM inspector.
As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.

select the next class with the previous class containing a text I gave

<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileDoc.doc">fileDoc.doc</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
...
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileJpeg.jpeg">fileJpeg.jpeg</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
This is my case, i want to select the " .ant-upload-list-item-card-actions > a" when the class "ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" contains fileDoc.doc
I made this
candidateUploadFileButton = '#filesUpload';
candidateUploadRemoveButton = '.ant-upload-list-item-card-actions > a';
cy.get(this.candidateUploadFileButton, {force: true}).contains(fileName);
cy.get(this.candidateUploadRemoveButton).click();
It works for a single input only for a single div class, if there two classes like in the previously example , it doesn't work beacuse it says there are multiple values
I added this picture, maybe it will help what i want to do, i want to press Remove button for the file named "fileDoc.doc"
https://i.stack.imgur.com/voQqp.png

Refer here:
As per your markup, you can use this:
cy.contains(fileName).next().find('> a').click()

How to expand/collapse nested div with jQuery

I have an expand/collapse using jQuery which works fine on the first level:
This is my razor file:
#model IntDashMakeRecAssgnmntsPoRespMngrVM
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (#Model.Audits.Count())</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
#foreach (var audit in Model.Audits)
{
<div>
<i id="expandRecommendations#(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations#(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>#audit.AuditAcnCd</b></span>
<div id="RecommendationDiv#(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
#foreach(var finding in audit.Findings)
{
foreach(var rec in finding.Recommendations)
{
<div style="display:none;">
<a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="#rec.RecommendationId"
title="Make assignment for #audit.AuditAcnCd">
<b>#audit.AuditAcnCd/#finding.FindingCd/#rec.RecCd</b>
</a>
</div>
}
}
</div>
</div>
}
</div>
</div>
This is my jQuery:
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
$("#MakeRecommendationAssignmentsDiv").toggle();
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
});
This is very simple to make the first level expand and collapse.
But now I need the nested 3 newly shown divs in the expanded div to each expand.
This is the jQuery I am writing to try and expand the inner divs.
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
console.log(this.id);
console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
expandNodeDivId = "RecommendationDiv" + expandNodeId;
console.log("#" + expandNodeDivId)
$("#" + expandNodeDivId).click(function (e) {
$("#" + expandNodeDivId).toggle();
});
});
In this line:
var expandNodes = $('i[id^="expandRecommendations"]');
I am getting all of my i tags that have a font awesome class (+ sign in a circle) acting as an expand button.
Now I roll through each of the "+ in a circle" buttons in the expandNodes collection and get the unique id I assigned to each of them with razor building on the server side (
<div id="RecommendationDiv#(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
and try to add a click event to each one to toggle itself which should show itself and the anchor divs nested inside of itself:
But it just won't won't expand.
Here are the console.logs showing I'm getting the right id's to call the element to expand:
These console.log lines show I am getting the write information to try to wire this up but I just can't get them to expand:
expandRecommendations279938 // the div I clicked on
279938 // able to parse the audit id from the id of the element I clicked on.
#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.
Anyone see the problem here? Any help would be greatly appreciated.
UPDATE 1
Here is the HTML source produced from the server side.
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOIGFinding1</b></span>
<div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
<b>testOIGFinding1/4/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
<b>testOIGFinding1/4/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
<b>testOIGFinding1/7/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
<b>testOIGFinding1/7/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
<b>testOIGFinding1/7/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
<b>testOIGFinding1/7/4</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
<b>testOIGFinding1/7/5</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
<b>testOIGFinding1/7/6</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOCFOFinding1</b></span>
<div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
<b>testOCFOFinding1/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
<b>testOCFOFinding1/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
<b>testOCFOFinding1/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
<b>testOCFOFinding1/1/4</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
<div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
<b>TestOigAllRecommendations/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
<b>TestOigAllRecommendations/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
<b>TestOigAllRecommendations/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
<b>TestOigAllRecommendations/2/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
<b>TestOigAllRecommendations/2/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
<b>TestOigAllRecommendations/2/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
<b>TestOigAllRecommendations/3/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
<b>TestOigAllRecommendations/3/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
<b>TestOigAllRecommendations/3/3</b>
</a>
</div>
</div>
</div>
</div>
</div>

I figured it out.
Here is the revised JavaScript:
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
create_expand_toggle(expandNodeId);
});
function create_expand_toggle(nodeId) {
$("#" + "expandRecommendations" + nodeId).click(function (e) {
console.log("Clicking");
$("#" + "RecommendationDiv" + nodeId).toggle();
});
}
I was referencing the same div I wanted to expand in the button click. I needed to make a second reference to the i tag with the font awesome + class acting as the button to hook up the click event.
Once tip. I tried to make a var for the two node id references and use them so it would be more readable. But then the click event for all three plus signs on that level show the same div. The last div. So I have to concatenate the ids in the create_expand_toggle function.

How to check if a specific SPAN class content text

wanna check whether a specific SPAN class context text or not?
The SPAN class I want to check against is "distance" that has the kilometers numbers like (, 27 kilometers).
Tried the below code but still not working
if ($('.trip-summary-info').find('distance').length > 0) {
alert("Working !!!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>

You could try the following:
var $distance = $('.trip-summary-info .distance');
if ($distance.text() === ""){
// There is no text, so handle that
}
else {
// There is text, so you could do something different
}

You are missing the . represent the class in find()
if ($('.trip-summary-info').find('.distance').length > 0) {
console.log($('.trip-summary-info').find('.distance').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>

you need to add . before distance to find class.
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span>
Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span><div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span><div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if($('.trip-summary-info').find('.distance').length > 0){
alert("Working !!!");
}
</script>

You can access it through this:
if($(".trip-summary-info").find('h3').find('.distance').length > 0){
alert('working!!').
}