Select element by class or ID [duplicate] - javascript

This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 9 years ago.
I am working on an ASP.NET page in which I generate some JavaScript code based on values in a database.
For example, in the database there might be the formula sum([#itemA]), which would evaluate to something like $('#itemA').change(function(){ sum(this); });.
I know that I can select elements using jQuery selectors such as $('[id*=itemA]') or $('[class*=itemA]'), but I am wondering if there is any way to combine these selectors so that any element with either a class or an ID of itemA would be selected.
Right now in my code I am just using if/else blocks to deal with ID's or classes, but if there is an easier implementation, I would love to use it.
I looked at the jQuery documentation and googled around a bit, but I didn't see anything that answered my question.
Thanks in advance!

This should do the trick
$('[id*=itemA], [class*=itemA]')
For more details, take a look to official jquery documentation

Use multiple selectors like
$('.class1, .class2....., .classn')
You can literally use anything like ID names, class names or selectors like you specified separated by commas

Like in css, when selectors are separated by ,they are cumulated :
var elements = $('[id*=itemA], [class*=itemA]')

Related

How to tell if element with certain class does not exist (PURE JS) [duplicate]

This question already has answers here:
jQuery: Check if div with certain class name exists
(19 answers)
Closed 7 days ago.
I have some code that creates a new paragraph element within a div and gives it the class "taskparagraph". I want to check if any elements with this class exist, and if not, add another (unrelated) paragraph.
I genuinely have no clue how to do something like this even though it seems like such a simple task. Maybe I'm just not Googling the right things...
P.S. I do not plan on using any JS libraries like jQuery for now. If using something like that is the only possible way to do this task please let me know.
You can use document.querySelector:
if (!document.querySelector('.taskparagraph')) { // or compare with null
// no element with class "taskparagraph" exists
}

jQuery disable multiple attributes at once [duplicate]

This question already has answers here:
Selecting multiple classes with jQuery
(4 answers)
Closed 3 years ago.
I'm a beginner and I'm wondering if there is a way to remove multiple attributes once without coding for each one.
For an example, please look at my code sample below.
$(".select-us").attr("disabled",true);
$(".select-as").attr("disabled",true);
$(".select-eu").attr("disabled",true);
$(".select-oc").attr("disabled",true);
I just want to know if there is any simpler way to do this. Thanks for your time.
$(".select-us, .select-as, .select-eu, .select-oc").attr("disabled", true);
Please wrap your multiple form elements in fieldset and disable/ enable this only
<fieldset id='fset' disabled={true}>
...
can disable and enable with jquery like this
$("#fset").attr('disabled', true)
Add a new class to every element like "select-all" and do:
$(".select-all").attr("disabled",true);

Is there any way to add non-element-contained text to a $("")? [duplicate]

This question already has answers here:
How to append/prepend/create a text node with jQuery
(3 answers)
Closed 6 years ago.
I'm creating a JavaScript framework to build HTML documents. First a virtual document is built using jQuery. Right now, I'm experimenting with jQuery's "add" function like so:
$(target).append($("").add($("<div>")).add($("<span>")))
The framework concatenates these calls to build the virtual document before it is appended to the target - this simplified code sample isn't literally what I'm doing. The reason for adding the first $("") is because the framework starts by creating an empty jQuery selection then adds stuff to it. Sub-documents are recursively created and added to parent elements.
This works fine for concatenating elements together, but what if I want to concatenate text? Let's say I want to have something like this rendered:
<div></div> Outside the box!
I can't just do $("<div>").add("Outside the box!") Also, $.after() doesn't seem to work unless the <div> is already on the DOM.
Is this functionality supported by jQuery? If not, are there any workarounds?
Yes, you can use simple string concatenation with current HTML of element: $('<div>').html($('<div>').html() + 'Outside the box!')
Since your code DOM is in memory and not actual HTML, you need to use multi-line code:
var $div = $('<div>', {html: $('<div>')});
$div.html($div.html() + "Outside the box!");

Change HTML element by ID [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Change an element's CSS class with JavaScript
Found lot of topics about this topic, but none helped me. I have:
<div id="text-6" class="block col-228">
Javascript code should add new class fit, so result should be:
<div id="text-6" class="block col-228 fit">
How to do that with javascript?
Try like this:
var elem = document.getElementById("text-6");
elem.setAttribute("class", elem.getAttribute("class")+" fit");
Important note: You need to be assure,that your DOM Hierarchy is constructed completely,then try to manipulate DOM Elements. That is why you need to put DOM manipulation scripts inside of the window.onload callback, or if you use jQuery, then inside of $(document).ready callback.
You put the following between your script tags.
document.getElementById('text-6').className += " fit";
I'd recommend using jQuery. Then you can just do something like this:
$("#text-6").addClass("fit");
EDIT:
Including the whole jQuery library may be overkill for your situation, but if you're dealing with DOM manipulation a lot, jQuery can simplify things quite a bit. If it's just for this one thing, then some of the other answers provided would be better.

Jquery unwrap() method? [duplicate]

This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
There is a great method in jquery called wrap() that will wrap a selected element inside a new element, like so:
Start with:
<p>I wish I was wrapped!</p>
Add code:
$("p").wrap("<div></div>");
End with:
<div><p>I wish I was wrapped!</p></div>
But what I need is something that will unwrap, so that the above process is reversed. It seems that the issue is that when you select a bad item (let's say an unnecessary table) that it always grabs what is inside it as well, so if I want to remove all <td>s, I am left with nothing, since that removed the td and anything inside.
Is there a standard reliable way of removing elements but leaving any children/ancestors alone?
In JQuery 1.4 unwrap() was added:
http://api.jquery.com/unwrap/
A quick Google search reveals that there is such functionality, in the form of a small 576 byte plugin called jqueryunwrap. I have not tried it personally, but it is worth a shot. ;)
$("p").unwrap() will unwrap the wrapping div....................I hope this helps

Categories