i have:
<span id="asdfasdf_test">
<span id="adfaf_test33">
<span id="2342_test">
<span id="34223sdf_testrr">
<span id="asdfsdsdf_test">
<span id="asdf2343sdf_test">
.red {
color: red
}
if span id ends at _test i would like add for this span class .red . how can i make this with jQuery?
LIVE EXAMPLE: http://jsfiddle.net/X6TTd/
$('span[id$="_test"]').addClass('red');
The $= attribute selector means 'ends with'. I added "span" to the jQuery selector since they are all spans in your example, but you can also select the attribute on any element:
$('[id$="_test"]')
CSS can do that for you! Why do you want to use jQuery? (besides: jQuery understands this CSS Selector)
Here you have it: http://www.w3.org/TR/selectors/#selectors
Related
How To Access keyword-text e.g java On click keyword-remove class.
First Of all it's outside keyword-remove scope can not use $(this).
I want to access nested selector span text.
<span class="keyword">
<span class="keyword-remove"></span>
<span class="keyword-text">java</span>
</span>
$(document).on("click",".keyword-remove", function(){
});
As the click event is on the span, it cannot be empty. If it is empty you cannot click it. After entering some data in the span select the sibling span using the siblings function and print the textContent. Alternatively .next can be used instead of siblings
$(document).on("click",".keyword-remove", function(){
console.log($(this).siblings('span')[0].textContent)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword"><span class="keyword-remove">First span </span><span class="keyword-text">java</span></span>
use next() to select the next sibling of the element you clicked.
$(document).on("click",".keyword-remove", function(){
console.log($(this).next('.keyword-text').text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">REMOVE</span>
<span class="keyword-text">java</span>
</span>
You can use the following code block -
$(document).on("click",".keyword-remove", function(){
console.log($(this).next().find('.keyword-text').text())
});
Working Example -
https://jsfiddle.net/0wmnxdrp/1/
Personally I would use closest() paired with a following find(). The reason being, this removes the positional logic from the equation, and you only rely on the parent child relationship.
$(document).on("click",".keyword-remove", function(){
console.log($(this).closest('.keyword').find('.keyword-text').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">X</span>
<span class="keyword-text">java</span>
</span>
How to add a target=_blank attribute to an anchor tag, except a button and certain div. How do I not add target attribute to "call-control" class and ID with #?
I've tried this:
$('a:not(.call-control,"#")').attr('target', '_blank').addClass('checkMate');
/* then later... */
$('.checkMate').attr("target", "");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="call-control">
<span id="incomingCallBrand"></span>
</div>
<div>
<span>Peter</span>
</div>
If I understand correctly, you want to select an element that has neither the class "call-control" nor an href set to "#", using jQuery's .not() method.
To select elements without href set to "#", I suggest jQuery's "Attribute Equals" Selector:
.not([href=#])
Adding the class requirement:
.not([href=#],.call-control)
I also recommend removeAttr() as opposed to setting the target to a blank string.
Here's an example:
$('a:not([href=#],.call-control)').attr('target', '_blank').addClass('checkMate');
/* remove the attribute after one second */
setTimeout(function(){
$('.checkMate').removeAttr('target');
},1000);
a {
display: block;
}
.checkMate {
background-color:pink;
}
/* to demonstrate when the target has been removed */
a[target=_blank] {
background-color:lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Class and HREF
Just Class
Just HREF
Neither Class nor HREF
For reference:
Add a class to a href that's set to '#'
Regardless of what specific links you're trying to select, your selector is invalid.
To apply the selection to any links that don't have a certain class, you're looking for $("a:not('.class')"):
To apply the selection to any links that don't have a certain class, you're looking for $("a:not('[href=#'])"):
These can be combined as $("a:not('.class-control, [href=#]')"):
$("a:not('.call-control, [href=#]')").attr("target", "_blank").addClass('checkMate');
.checkMate {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="call-control" href="#" rel="noopener noreferrer">Same Page (doesn't get the target)</a>
<br />
<a class="call-control" href="http://www.google.com" rel="noopener noreferrer">Google (doesn't get the target)</a>
<br />
Facebook (gets the target)
Also, it's important to note that target=_blank has a significant security vulnerability, which can be exploited with window.opener(). This can be seen here. To fix this, you also need to add rel="noopener noreferrer" to your links (as above).
Hope this helps! :)
I'm trying to add a class to my p element when the textarea is active
This is what I've got so far with no luck.
<textarea class="text"></textarea>
<p class="someClass">
<span class="span">
TEXT
</span>
</p>
jQuery
$('textarea').focus(
$(".someClass").addClass("focused");
});
The final result I'm trying to accomplish is when the textarea is focused
<textarea class="text"></textarea>
<p class="someClass focused">
<span class="span">
TEXT
</span>
</p>
Can this be done by grabbing the set class "someClass"?
You are actually doing it wrong. You should do this way by sending an anonymous function:
$('textarea').focus(function () {
$(".someClass").addClass("focused");
});
You have missed that. I would say a better way, if the .someClass is next to the element in question, you can use CSS's sibling selector +, without using JavaScript:
textarea:focus + p {
background: #99f;
}
<textarea></textarea>
<p>Click on TextArea</p>
You should to supply an anonymous function to the focus event handler. Try this:
$('textarea').focus(function() {
$(".someClass").addClass("focused");
});
Also note that you can do this in CSS alone without the need for any JS code. Using the CSS method has the added benefit of the styles being automatically removed when the textarea loses focus.
textarea:focus + p {
/* styles in here which matched the .focused class */
}
Working example
I have some fixed HTML and I need to set a class to the element newgroup based on the element with the class relatedheader. As you can see in the HTML, the first element has a string - Accessories. I want to give the three elements below that element with the class newgroup to have class based on that string. Then I want the next set to have class from the next relatedheader element.
How do I do this with jQuery or vanilla JS? I guess the first step is to make the relatedheader element a parent?
What I got so far:
$('.relatedheader').nextUntil('.relatedheader').addClass('selected');
How do I make the script take the class dynamically releatedheader element?
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>Accessories/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>computers/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
Here you go:
$(document).ready(function(){
$(".unfoldedlabel a").each(function(){
if($(this).text() != "")
{
$(this).closest(".relatedheader").nextUntil(".relatedheader").addClass($(this).text().replace("/",""));
}
});
});
LINK To JSFIDDLE
Here is the working fiddle.
$('.relatedheader').find('a').each(function() {
$(this).parents('.relatedheader').nextUntil('div.relatedheader').addClass('selected');
});
Here in the above example I'm looping through each a inside .relatedheader class and then adding selected class to all element until next .relatedheader.
NOTE: If you want to only add those class to next set of element as per .relatedheader a selection or some event then you can bind this functionality to that event only.
Hope this is what you need!
I am trying to select a span within a span within a div using plain CSS or JQuery selectors. The html is as follows:
<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button paginate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>
I want to select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually.
With my very limited knowledge of CSS and jQuery I've tried a couple of things but I'm sure my syntax is wrong, like $("paging_full_numbers span:eq(1)") .
Could you please give me a hint of how to go about it?
To select them individually, you can simply select them all and then use jQuerys .each(). For example
spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');
will find all classes of 'paginate_active' or 'paginate_button' that, are inside your element of id=example2_paginate. Then you can write:
spanList.each(function(index){
<-- code here for occurence of index index-->
});
Alternatively to select the i^th button without looping through them all:
spanList.eq(i)
See jsFiddle: http://jsfiddle.net/t4KWr/
This CSS is what you want.
div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button
A quick way to get, say, the third of the 5 spans would be:
$(".paging_full_numbers > span > span:nth-child(3)")
its seem that there is a problem with
$("paging_full_numbers span:eq(1)")
You should write like
$("#paging_full_numbers span:eq(1)")
Or if you are using class
$(".paging_full_numbers span:eq(1)")
This select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually:
$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
//do what you want here
});
That select the span's with only class 'paginate_active' or only class 'paginate_button'