How to find a specific data attribute?

Question

I want to add or remove lis to a list in javascript. For that purpose I found that I need to add data attributes and find the item with that value.

if ($('li[data-requestId=' + requestId + ']').length == 0)
{
    var element = getRequestElement();
    var li = document.createElement("li");
    li.setAttribute("data-requestId",requestId);
    li.appendChild(element);
    $('#requestsUL').append(li);
}

but the first line gives this error:

Syntax error, unrecognized expression: li[data-requestId=6.22.20]

what is your if fucntion aims first and how do you trigger it? — Güney Saramalı, Oct 08 '17 at 06:35
Use `if ($('li[data-requestId="' + requestId + '"]').length == 0)` — Hassan Imam, Oct 08 '17 at 06:35
@HassanImam's suggestion should work; if the data attribute value is enclosed in quotes it's not necessary to escape the contents. — Daniel Beck, Oct 08 '17 at 06:37
@mplungjan oh I could guess. I have a feeling that this is not the right way to add or remove list items.. am I right? — Blendester, Oct 08 '17 at 06:37
It is not a recommended way I would say. Why not use jQuery all the way? `var dataID = requestId.replace(/\./g,"_"); if ($('li[data-requestId=' + dataID + ']').length == 0) { var element = getRequestElement(); var li = $("
@mplungjan you've incorrectly marked this as a duplicate; it's not necessary to escape the dots inside the `[]` part of the selector. `$('#x.y')` needs escaping as `$('#x\\.y')` to match `
`; `$('[data-bar="x.y"]')` does *not* need escaping to match `
`. — Daniel Beck, Oct 08 '17 at 06:44
@mplungjan I tested it, placing the attribute inside the quotes does the trick even if the data attribute contains dots(`.`). — Hassan Imam, Oct 08 '17 at 06:51

score 1 · Answer 1 · answered Oct 08 '17 at 07:11

Add extra quotes around the selector, example

$('li[data-requestId=a.b.c.d.e fga]');

will not work, but

$('li[data-requestId="a.b.c.d.e fga]"');

will work

...

change the line of code

if ($('li[data-requestId=' + requestId + ']').length == 0)

to:

if ($('li[data-requestId="' + requestId + '"]').length == 0)

score 1 · Accepted Answer · answered Oct 08 '17 at 07:59

Hello here is a way that let you read all the elements inside the ul tag based on the data-requestId.

I used a variable to concatenate the li[data-requestId=""] with the requestId:

var dataSelector='li[data-requestId="' + requestId + '"]';

by this way upi ensure that the selector is entirely a string so it will logically work. Finally here is a code snippet which demonstrate all what I've said :

$(function(){

var liSize=$("ul").children().length;

for(var requestId=1;requestId<=liSize;requestId++)
{
var dataSelector='li[data-requestId="' + requestId + '"]';
console.log($(dataSelector).text());
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-requestId=1>Item 1 </li>
  <li data-requestId=2>Item 2 </li>
  <li data-requestId=3>Item 3 </li>
  <li data-requestId=4></li>
</ul>

How to find a specific data attribute?

2 Answers2