I have many elements:
<span class="test"></span>
<span class="aaa"></span>
<span class="test-one"></span>
<span class="test-two"></span>
<span class="aaa-one"></span>
<span class="test-two"></span>
How can i get with one select all span with name test*?
I can:
$('.test, .test-one, .test-two')
but maybe is possible to get this with regex?
$('.test*')
?
in css:
.test, .test-one, .test-two
.test*
You're abusing classes, and are looking for multiple classes instead:
<span class="test"></span>
<span class="aaa"></span>
<span class="test one"></span>
<span class="test two"></span>
<span class="aaa one"></span>
<span class="test two"></span>
Now, $('.one') will correctly return the 3rd and 5th element, and $('.test') will return all elements except the 2nd and 5th.
Note that you can also use $('.two.test') to get the 4th and 6th element.
Use the starts-with selector:
$('span[class^="test"]').
http://api.jquery.com/attribute-starts-with-selector/
It's not clear from the small example whether there's a pattern to the -one and -two class names.
If there is a pattern, and your idea is to have alternating classes (eg odd and even rows?), then you might want to consider using the nth-child() selector. This will allow you to select the relevant elements without needing to reference any class names at all.
In this case, you could do something like this:
<div class='container'>
<span class="test"></span>
<span class="test"></span>
<span class="aaa"></span>
<span class="test"></span>
</div>
and then the jquery:
$('container span:nth-child(odd)')
and
$('container span:nth-child(even)')
See the jQuery manual for nth-child for more info.
If this isn't what you're looking for, then I would suggest following #NielsKeurentjes advice and using multiple class names in the relevant elements.
Hope that helps.
I would change the classes, because a HTML-Tag can have multiple classes at once:
<span class="test"></span>
<span class="aaa"></span>
<span class="test testone"></span>
<span class="test testtwo"></span>
<span class="aaa-one"></span>
<span class="test testtwo"></span>
If you can't change the HTML, you can do it with javascript (jquery):
$('[class]').each(function(){
var className = $(this).attr("class");
if("test" == className.substring(0, 4)) //starts with "test"
{ doSomething();
}
});
(This code only works, if the tag has not more than one class)
But this is dirty code because it scans each dom-element which has a class.
If you only want to apply css-Style, the better solution, if you can't change the HTML, is to add all possible classes to the css-File:
.test, .test-one, .test-two{
...
}
...or using the css3-selectors as mentioned in the other answers, but older browsers won't support it.
You can use either
$("span[class*='test']"); // element with test anywhere in class attribute
or
$("span[class^='test']"); // element with test at the start in class attribute
note that these will work only if the element has single class.
however you should better use what #Niels have shown.
For a good CSS selector reference : Tutorial from net.tutsplus.com
Related
I use the browser from Webdriver.io and want to select an element with the class js-add-board (which is a button i would like to click) inside this constellation:
<div id="content">
<div class="wrapper">
<div class="news-sidebar sidebar">
..
</div>
<ul class="board-list clearfix">
<li class="js-add-board">
<a class="board-list-item label" href="#">Add a new board</a>
</li>
</ul>
</div>
</div>
This is from the styles:
.board-list .js-add-board {
text-align: center;
}
What I tried was:
browser.element('[js-add-board]');
but it returned undefined.
[js-add-board] is an attribute selector. It would match things like <a js-add-board="something"> or <div js-add-board="1">.
To match a class, use the CSS class selector: .js-add-board
If you must use an attribute selector, you could do [class~="js-add-board"], but I don't recommend that.
Tip: when you're trying to figure out the correct selector to use in your end-to-end tests, as long as it's not one of Protractor's Angular-specific selectors you can just run it through document.querySelector or document.querySelectorAll and see if it gets anything.
For more on attribute selectors, see this CSS Tricks post.
As far I can see, you should use selector by class, not by attribute.
So, in this case, please try the following:
browser.element('.js-add-board');
I want to use JS to add class .block to a tree of elements, up to a certain point—stopping when it reaches the first div element.
If the user doesn't have JS enabled, the elements should not have the class; else, they should. That's why I'm using jQuery to add the class instead of writing it in the markup.
Here's what I have:
<div>
<label>
<input .../>
<time>
<span class="js-block">Wednesday, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
I want to add class .block to both spans, the time, and the label, (and not the input), and this works perfectly fine:
$('.js-block').addClass('block').parentsUntil('div').addClass('block')
Now the duplicate call .addClass('block') doesn't sit well with me, so I tried this, but it didn't work:
$('.js-block').add(function () {
return $(this).parentsUntil('div')
}).addClass('block')
Am I using .add() correctly?
I have not tested whether this
$('.js-block').add($('.js-block').parentsUntil('div')).addClass('block')
works, because if it did work, it would be just as bad as calling the same function twice. The whole point is to not have repeated code.
I assume here that you have added the class "block" to each element
Then to access the class just use
$(".block").click( .... etc etc
want to add class .block to both spans, the time, and the label, (and not the input)
My question is asking if I can reduce the number of calls to only
one time.
You can use :has(), :not()
$("div:has(.js-block) :not(input)").addClass("block")
.block {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
div
<label> label
<input/>
<time>
<span class="js-block">Wednesady, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
For you particular situation use .find('*') then use .not() to
exclude the element you don't want.
$("div").find('*').not('input').addClass("block")
$("div").find('*').not('input').addClass("block");
.block {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
div
<label>label
<input/>
<select>
<option>Select me</option>
</select>
<time>
<span class="js-block">Wednesady, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
try something like this.
$(".class1").add(".class2").click(function(){
// do something
});
I am working on a small system that uses collapsable blocks - for this I am have a css class that toggles on or off depending on the jQuery dependancy.
The code I am using is:
$("#click_me").on("click", function () {
$("#clicked_action").toggleClass("show");
});
And this works, but is not what is needed. What is need is:
$(".collapse-header").on("click", function () {
$(this).closest(".collapse-body").toggleClass("show");
});
But this does not work.
I am not getting any console errors, so any help is apprecated
EDIT HTML value:
<div class="collapse-header" id="click_me">
<span class="float-left">Click me</span>
<span class="float-right"><span class="glyphicon glyphicon-plus"></span></span>
<hr class="hr" />
</div>
<div class="collapse-body" id="clicked_action">
I'm collapsed
</div>
You are looking for
$(this).parent().find(".collapse-body")
About .closest
$(element).closest(selector) is to find the first element which matches selector in traversing up through element's ancestors.
In your case, your elements are at the same level ("siblings") so .closest doesn't work.
I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).
I need to use getParent() because their are another same <div>s repeating
My HTML is
<div class="Test">
<p class="commentBody">
<span class="view_more-comment">abcd...
<a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
</span>
<span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
</span>
</p>
</div>
When I use this console shows the error
Uncaught TypeError: $(...).getParent is not a function
Any method to solve this problem?.
There is no getParent() in jQuery. Use:
onclick="$(this).parent().prev().show(); $(this).parent().hide();"
Docs
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
I'd recommend you to use on for event handling and not inline handlers
EDIT
Using jQuery:
$('.view_less_link').on('click', function() {
$(this).closest('.commentBody').find('.view_more-comment').show();
$(this).parent().hide();
});
Use .parent() instead of getParent().
Update your html as below and keep a similar class for both the links
DEMO
<span class="view_more-comment more">abcd...
<a class="view_link " href="javascript:void(0);">more</a>
</span>
<span class="view_more less" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_link" href="javascript:void(0);">less</a>
</span>
and then this JS
$('.view_link').on('click',function(){
$(this).parent().slideToggle(200);
$(this).parent().siblings().slideToggle(200);
});
I have a bunch of child elements that are uniquely identified within a parent div. I want to know if there's a way in jQuery (or javascript) to capture all of them? The number of children in the parent div is arbitrary, meaning it could be any number for each div. For example:
<div class="parent1">
<span class="child1">some text here</span>
<span class="child2">some other text</span>
...
<span class="child49">yet more text</span>
<span class="something_else">other text i don't want to select</span>
</div>
<div class="parent2">
<span class="child1">some text</span>
<span class="child2">some text</span>
...
<span class="child120">some text</span>
</div>
So considering the above example, how do I get ALL the children (.child1 through .child49) within the class parent1?
I know that doing the following will work in jQuery (using multiple selector):
$(".child1, .child2, ..., .child49").css("background","red");
But is there a better way? I won't always know how many children are in each parent.
EDIT: also, I might have other children in the parent with a different class name that I DO NOT want to select; I specifically want to select all the "child*" classes.
$('.parent1 span[class^="child"]')
will select all the spans that start with the class child under the class .parent1.
If you want all the span.childX under all parentX then use:
$('div[class^="parent"] span[class^="child"]')
This is using a CSS3 attribute selector which jQuery have implemented (and extended in some cases). From the documentation:
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
These codes gets all child in div.parent1 and div.parent2
$('[class^="parent"] span').css({ });
$('[class^="parent"]').children().css({ });
Thess codes gets onli the children for parent 1
$('.parent1 span').css...
$('.parent1').children().css...
use .children along with .filter, if number of children are not certain then label all childs which you want to manipulate of parent1 as child1
$(".parent1").children().filter(".child1").css({color:'Red'});
here is the fiddle http://jsfiddle.net/8hUqV/1/
jquery children