jQuery selector custom attribute - javascript

I have elements in my page like
<div class="editableTxt" data-model-attr="name" data-model-id="123">some text</div>
Now how do I write a selector in jQuery based on the 2 custom attribute values.
So i want something like select element with data-model-attr="name" data-model-id="123"
I want to get a unique element. So I use the 2 attributes.

USe like this
$("[data-model-attr='name'][data-model-id='123']")

As you specified element and not div, have you simply tried:
$('[data-model-attr="name"][data-model-id="123"]');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/x23BV/
for a div obviously just add div:
$('div[data-model-attr="name"][data-model-id="123"]');

Use:
$('div[data-model-attr="name"][data-model-id="123"]');

$('div[data-model-attr="name"][data-model-id="123"]')
But don't use it, it's very slow, set id or classes to this div.

Related

How to select element with single class name in Jquery?

I have below html and want to get the element based on 'natural' class. The reason is I get t dynamic classes after 'natural'
<coral-checkbox class="natural coral-Form-field coral3-Checkbox" ></coral-checkbox>
I am trying below code to get hide the element but it is not working.
$("coral-checkbox[class='.natural']").hide();
But it is working when I select entire class like below but I need to do with only 'natural'. Is this possible ?
$("coral-checkbox[class='.natural coral-Form-field coral3-Checkbox']").hide();
Use .classname to select based on any of the element's classed. When you use an attribute selector, it matches the entire attribute (unless you use modifiers like *=, but they're not appropriate here, either).
$("coral-checkbox.natural").hide();
Use the class the selector instead of the attribute selector:
$("coral-checkbox.natural").hide();

Remove div between div using Jquery

I need to remove div elements which are loaded dynamically between two static div elements.
HTML
<div id="defaultFirst">
</div>
..
..
..
<div id="defaultLast">
</div>
There are some div elements which are loaded in between those two static div elements. Now I need to remove those before I append some other elements.
I tried using $('#defaultFirst').nextAll('div').remove() but that removed the #defaultLast element too.
I know that I can get the ids of the dynamic div and remove. But I need to know if there is any simpler way to remove those dynamic div elements?
Use nextUntil() instead of nextAll() and pass in a selector which selects your #defaultLast element:
$('#defaultFirst').nextUntil('#defaultLast').remove();
.nextUntil( [selector ] [, filter ] )
Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
— jQuery's documentation on nextUntil()
If you have elements which aren't div elements between those two which you aren't wanting to remove, you can specifically remove only div elements by passing in a selector to your remove() call:
$('#defaultFirst').nextUntil('#defaultLast').remove('div');
I would recommend getting to the cause of why the divs are appearing in the first place rather than hacking like this. However if you have to then the following should work
$('#defaultFirst').nextAll('div').not('#defaultLast').remove();
Codepen example - http://codepen.io/webknit/pen/ZeZXdQ

DIV with two tags?

I know how to deal with more than one class in div but I never seen something like that:
<div data-reactroot>
</div>
It is not a class, not a ID it looks just like multiple tag. How am I supposed to select it with jQuery? I tried
$('div data-reactroot');
But it seems that I'm not even close to it.
Try to use has attribute selector at this contex,
$('div[data-reactroot]');
Since data-reactroot is an attribute of div element.
As written, it is an attribute and here is how to get it with plain javascript using the querySelector
var elem = document.querySelector('div[data-reactroot]');

Display CSS attribute

Is it possible to use JQuery or JavaScript to check the value of a CSS attribute? For example, suppose I have a div with id = mydiv. I want to check the value of the display attribute.
I try
$("#mydiv").display
But this does not work
Any tips?
Use the .css - $("#mydiv").css("display")
You're looking for jQuery's css method:
$(...).css('display')
Apart from css display attribute check via jQuery which is this:
$('selector').css('display')
the alternative is
$('selector').is(':visible')
This checks whether an element is actually visible and occupies space in DOM.
Using the .css()
Example: http://jsfiddle.net/5wyjW/
$("#mydiv").css("display");
You can do it : $("#mydiv").css("display")

How can I target an element's 'parent'

I have some <TD>s without unique names. Inside them there are spans with unique classnames so I have no problem targetting the spans. How can I target the parent <td> so I can change its class?
I want to do something like $(".classname").parent("TD").className="newClassclassname".
You were close:
$('.classname').parent('td').addClass('newClassName');
Though typically it's safer to go with:
$('.classname').closest('td').addClass('newClassName');
... which doesn't assume the <td> is the immediate parent.
The reason .className doesn't work is because jQuery returns elements wrapped in the jQuery object. If you want to access the original (DOM) object you need to select the first item in the jQuery collection with [0]:
$('.classname').parent('td')[0].className = 'newClassName';
But I recommend using the jQuery function addClass() anyway since it won't interfere with existing classes.
You can do
$("span.classname").closest("td").addClass("newClassclassname");
Sorry, do you mean following code:
$(".classname").parent("TD").addClass("newClassName");
$(".classname").parent("TD")[0].className="newClassname";
$(".classname").parent().addClass("newClassclassname");

Categories

Resources