How to make selector that find class and data-id=X

Question

<ul>
<li id="RadListBox1_i2" class="rlbItem ui-draggable">

    <div class="ui-draggable ui-state-default" data-shortid="1007">
    <em>ProductId: </em>
    <span>110-01-070-10</span>
    <br>
    <em>ShortID: </em>
    <span class="ShortID" data-shortid="1007">1007</span>
    <br>
    <em>Product Name: </em>
    <span>Clearly Retro Style Colour Name Necklace</span>
    <br>

    <em>
    </div>
    </span>
    </li>
    <li id="RadListBox1_i3" class="rlbItem ui-draggable">
    <li id="RadListBox1_i4" class="rlbItem ui-draggable">

</ul>

I need to build selector that find element that contains id=X and disable this item by .draggable('disable');

Some think like this:

find class y where data-shortid=X and make it

$("ul li").find(".ShortID").attr("data-shortid="+X+).draggable('disable');

Answer :

$("span.ShortID[data-shortid="+ShortId+"]").parents("li:first").draggable("disable");

possible duplicate of [jQuery how to find an element based on a data-attribute value?](http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value) — Felix Kling, Aug 05 '13 at 08:08
I need to find element based on 1:Class And 2:data-attribute AND 3:make it draggable(disable)?Sow no it is no duplicate!!! — Vladimir Potapov, Aug 05 '13 at 08:45
You didn't know how to select elements by attribute, and that's what the other question covers. Additionally selecting by class just means to combine both selectors. Look [how many selectors exist](http://api.jquery.com/category/selectors/), we cannot have a question about every possible combination of those. We have to expect that people at least know the basics of CSS selectors. — Felix Kling, Aug 05 '13 at 08:49
But if it makes you feel better, this question could be closed as duplicate of [Jquery - How to find an element using class and attribute](http://stackoverflow.com/q/2148523/218196). — Felix Kling, Aug 05 '13 at 08:52
Hhhhhh...yea you right(you got me with last link it is the same) i tried to combine all by my self but i get stuck.Sow i come here.Thx any way. — Vladimir Potapov, Aug 05 '13 at 08:57

Stobor · Accepted Answer · 2013-08-05T07:33:16.893

2

You need to disable the li, not the span, so you need to find the parent:

$("span.ShortID[data-shortid=1007]").parents("li").draggable("disable");

edited Aug 05 '13 at 07:33

answered Aug 05 '13 at 07:22

Stobor

44,246
6
66
69

This code working but when i replace 1007 to my var ShortID (i check that ShortID not null) ` $("span.ShortID[data-shortid="+ShortId+"]").parents("li").draggable("disable");` it give me error` Error: cannot call methods on draggable prior to initialization; attempted to call method 'disable'` – Vladimir Potapov Aug 05 '13 at 07:49
1

What is the value of ShortId when you get that error? are you sure that it is draggable? – Stobor Aug 05 '13 at 07:57
1

@Vova: The error is clear, isn't it? You are trying to disable the draggable behavior of an element that is not draggable. – Felix Kling Aug 05 '13 at 08:09
I find the problem when i test with 1007 it takes first li that have draggable BUT when i use +ShortId+ it for some reasons take last parent of li sow i change a little bit code to this $("span.ShortID[data-shortid=" + ShortId + "]").parents("li:first").draggable("disable"); and know it works – Vladimir Potapov Aug 05 '13 at 08:20
@Vova: If you have a nested list, then `.parents('li')` will select all `li` elements that are ancestors of the element. Some of them might not be draggable and hence you get the error. You probably want `.closest('li')` instead or even better `.closest('li.ui-draggable')`. – Felix Kling Aug 05 '13 at 08:39
Yes exactly but when i put id by my self 1007(hardcode) it take the li.ui-draggable but with var id it take the li that not draggble and it make no seance becase there no difference between (hard-coded 1007) and var id i check it .any it work now.thx – Vladimir Potapov Aug 05 '13 at 08:51

Code Lღver · Answer 2 · 2013-08-05T08:39:23.777

1

Use this code:

$("ul li.ShortID[data-shortid="+X+"]").draggable('disable');

EDITED:

   var obj = $("ul li span.ShortID");
   var ids = obj.attr("data-shortid");
   if(ids == X) {
     obj.draggable('disable');
   }

edited Aug 05 '13 at 08:39

answered Aug 05 '13 at 07:20

Code Lღver

15,573
16
56
75

It seems like good code but it doesn't work.I also tried $("ul li span.ShortID[data-shortid=1005]").draggable('disable'); – Vladimir Potapov Aug 05 '13 at 07:30
But this work $("#RadListBox1_i2").draggable('disable'); work buti need to check the id and then make it disable – Vladimir Potapov Aug 05 '13 at 07:32
@VovaPotapov what is you want to check. can you give some specification. – Code Lღver Aug 05 '13 at 07:35
`ids` is a string. How is `ids..draggable('disable');` supposed to work (ignoring the syntax error)? – Felix Kling Aug 05 '13 at 08:11

score 1 · Answer 3 · answered Aug 05 '13 at 07:21

1

$(".ShortID[data-shortid=1007]")

Above code will return you the element with class="ShortID" and attribute data-shortid="1007"

When the element is picked, you can do anything you want with it.

answered Aug 05 '13 at 07:21

Ali Shah Ahmed

3,263
3
24
22

score 1 · Answer 4 · answered Aug 05 '13 at 07:21

1

Try this (jQuery Attribute Equals Selector):

$("ul li .ShortID[data-shortid='"+X+"']").draggable('disable');

answered Aug 05 '13 at 07:21

jerone

16,206
4
39
57

score 0 · Answer 5 · answered Aug 05 '13 at 07:20

0

From JQuery documentation:

$( ",someclass[data-id='yourid']" ).dosomething();

answered Aug 05 '13 at 07:20

kwarunek

12,141
4
43
48

score 0 · Answer 6 · answered Aug 05 '13 at 07:27

$("ul li").find(".ShortID").attr("data-shortid="+X+).draggable('disable');

Would find all elements that have is inside a ul li that has a class .ShortID. To grab a element by an attribute and value. You could do

$("div[data-shortid=" + x );

Beware that in your example you have to divs with the same ID.

http://api.jquery.com/attribute-equals-selector/

Btw. Keep using find to nest deeper as in your example, this will help on performence.

How to make selector that find class and data-id=X

6 Answers6