How to identify html elements that don't have a special id with jquery or otherwise?

Question

I have a div filled with spans that don't have an id on them, and need to be able to determine if one of those spans is marked(highlighted). My approach at first was the following:

function isSelected(element){
  var selectedElement = window.getSelection().anchorNode.parentNode;
  if($(selectedElement).index() === $(element).index()){
    // It's selected
  }
}

But this solution doesn't consider cases where other elements from another div are selected that have the same index.

I tried comparing the element objects like this:

$(selectedElement).get() == $(element).get()

and like this:

$(selectedElement) == $(element)

but the comparison was always returning false.

How do I determine if they're the same without giving every span an id?

Solution:

if(selectedElement.isEqualNode(element){
}

If your spans would get a class 'selected' once they get selected, this would be quite trivial since you can then just select all children from the div that have that class. — Shilly, Apr 13 '17 at 12:12
@ Shilly I don't really like the idea of repeatedly assigning classes to elements in run time. Also there can be only one selected element by using `window.getSelection().anchorNode.parentNode;`. — Ibos, Apr 13 '17 at 12:16
@xDreamCoding The html code is generated with javascript and looks very messy, it would take a while to order it. — Ibos, Apr 13 '17 at 12:17
Do you have need to have more than one selection? If you're just trying to run some code once something gets selected, you have the `selectionchange` Event that will trigger every time the user highlights something. You can then refer to the text highlithed and its div from the event target. — Shilly, Apr 13 '17 at 12:19
@Shilly That's not what I'm aiming to do. I need to know if the selection start and end is inside one of the spans and not outside once a post-button is pressed. The problem is that when I ask for the selection start of an element that isn't selected, I get 0, not false or -1 for example, so I can't detect exactly where it started unless I compare objects and selected object. — Ibos, Apr 13 '17 at 12:30
@Ibos There's also a selection start event. I would use those and save references instead of later trying to find the nodes again ocne post is pressed. — Shilly, Apr 13 '17 at 12:33
@Shilly So the selection start event triggers when changed too? I didn't find it online. — Ibos, Apr 13 '17 at 12:37
https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange. The `selectionstart` one is only firefox atm it seems. :( But if you combine mouse down with selectionchange and mouseup, you can fake selectionstart and selectionend. As long as the next selected letter has the same parent as the previous letter, you know the user is still selecting inside the same text string. Once the mouseup event happens, you know the selection is ended, which node it was in and which text was selected inside that node. Anyways, good luck. — Shilly, Apr 13 '17 at 13:09

score 1 · Answer 1 · answered Apr 13 '17 at 12:58

1

if(selectedElement.isEqualNode(element){
}

answered Apr 13 '17 at 12:58

Ibos

72
9

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

This thread is discussing a topic related to your situation Object comparison in JavaScript

Maybe one of their suggestions helps you. Unfortunately Javascript does not provide anything like .ReferenceEquals() like for example C# does.

edited May 23 '17 at 10:30

Community

1
1

answered Apr 13 '17 at 12:09

Larsupilami

58
7

What is marked(highlighted) for you ( class, id etc...) – Zakaria ASSANI Apr 13 '17 at 12:11
What does this question have to do with objects? – Shilly Apr 13 '17 at 12:11
Ibos is asking for a solution how to check if two variables are referencing the same object, which is in his case a DOM object. – Larsupilami Apr 13 '17 at 12:18
Could you provide an example how that could solve this selection problem? Always willing to learn, since I didn't think that deep object comparison would work here. – Shilly Apr 13 '17 at 12:26
Thanks for the link. I'll accept this answer as the sollution in case I don't get a better one. – Ibos Apr 13 '17 at 12:34

score 0 · Answer 3 · answered Apr 13 '17 at 12:14

0

Try to use this code:

if ($('div span .highlighted')){
  alert ('span is highlighted');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <span class="highlighted"></span>
    <span class="normal"></span>
  </div>
</div>

answered Apr 13 '17 at 12:14

Felix Haeberle

1,530
12
19

I meant highlighted as in "went over with the mouse cursor pressed on the text". You're assuming I know what is highlighted and what isn't before it happens. – Ibos Apr 13 '17 at 12:22
but if I'm understanding you: there is nothing to define on which spans you want to highlight the text or not. how do you want to differentiate? – Felix Haeberle Apr 13 '17 at 12:39
I get to the spans that I need to check on by traversing from an ancestor to them. I could also traverse back to the ancestor and then compare ancestors again but that would be inelegant and probably time consuming. – Ibos Apr 13 '17 at 12:45

How to identify html elements that don't have a special id with jquery or otherwise?

3 Answers3