Jquery - Selector wont go deeper

Question

What I already got by JQuery Selector on using:

$("li[data-uid='"+dialogItem.uid+"']")

is:

<li role="treeitem" class="k-item k-first k-last" data-uid="b3e03746-c914-49a6-a95f-756de2d97a1b" aria-selected="false" data-expanded="true" aria-expanded="true">
  <div class="k-top k-bot">…</div>
  <ul class="k-group" role="group" style="display: block;">
    <li role="treeitem" class="k-item k-last" data-uid="cdd29906-aa64-43bc-b727-950a32ce5c00" aria-selected="true" data-expanded="true" aria-expanded="true" id="dialogtreediv_tv_active">…</li>
  </ul>
</li>

I want to get the data_uid cdd29906-aa64-43bc-b727-950a32ce5c00 from the most inner "li" but as soon as I add the element "ul" to the selector (to go one step deeper) I don't get anything back: $("li[data-uid='"+dialogItem.uid+"'] ul" (same with "> ul" or "ul:first-child")

The weird thing: If I add "div" (instead of "ul") it goes into the div element.

What am I doing wrong or is Jquery unable to handle different element types on the same hierarchy (in this case "div" and "ul")?

Could you post the actual code you're having trouble with? It's hard to tell when you describe it in text. — Barmar, Jun 30 '17 at 22:11
What I want to do: $("li[data-uid='"+dialogItem.uid+"'] > ul > li") — Jonny, Jun 30 '17 at 22:16
Can you confirm the value of dialogItem.uid. It's not "cdd..." but some chance? — freedomn-m, Jun 30 '17 at 22:17
Seems like it should work? Inspect your HTML, it could be it's invalid and has been changed by the browser — adeneo, Jun 30 '17 at 22:17
@Jonny See this one: https://jsfiddle.net/barmar/yx30qL4k/1/ it gets the inner `li` data attribute. — Barmar, Jun 30 '17 at 22:19
You'll need to create a [mcve] as there are no issues with the code as-provided. (as also shown by Barmar's fiddle). Do you have any third-party plugins acting on the html? Check the html in the browser/view source. — freedomn-m, Jun 30 '17 at 22:21
Wow, many answers in a view minutes, thanks all! @Barmar: I can see your example working as it should. If I add the alert with length output I still got 0. I'm using KendoUI Framework. The HTML code above is created by the Widget Treeview, that works in general. dialogItem.uid holds 80692773-f0ac-46a6-aa5f-9ed3146bd0ec and that is fine since $("li[data-uid='"+dialogItem.uid+"']") shows the correct output. Thanks all, I have to do some local investigations then, so weird. — Jonny, Jun 30 '17 at 22:45
Ugh, *kendo*, should have recognised the `k-` classes. I feel for you. — freedomn-m, Jun 30 '17 at 22:52

score 0 · Answer 1 · answered Jun 30 '17 at 22:15

0

$("ul").find("[data-uid='" + dialogItem.uid + "']");

For more info and other techniques visit this thread jQuery how to find an element based on a data-attribute value?

answered Jun 30 '17 at 22:15

Mateusz Mysiak

548
6
19

This is wrong. The `ul` is inside the element with `data-uid=dialogItem.uid`. – Barmar Jun 30 '17 at 22:17
OP is already finding the element based on the data attribute. – freedomn-m Jun 30 '17 at 22:18
I don't see how the ```ul``` being inside is a problem. It finds any ul with an element that has data-uid in the document. – Mateusz Mysiak Jun 30 '17 at 22:20
@MateuszMysiak the`ul` being inside is not a problem... usually. You've "fixed" `ul>[data]`, OP has problem `[data]>ul`. OP has some other problem that is not obvious in their code. This does not answer the problem of "[data]>ul". – freedomn-m Jun 30 '17 at 22:23
Thanks for you post even if you didn't understand my problem and posting a link that doesn't cover the problem. – Jonny Jun 30 '17 at 22:48

Jquery - Selector wont go deeper

1 Answers1