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'
Related
I have a div class which is essentially a button that I'm trying to click using jQuery
<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>
Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:
console.log($('.div.tool-button .refresh-button icon-tool-button:first'))
console.log($('.div.tool-button .refresh-button icon-tool-button'))
You had multiple problems with the selector.
Remove . before div since its a tag not a class.
Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.
console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);
console.log($('div.tool-button.refresh-button.icon-tool-button').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tool-button refresh-button icon-tool-button" title="Refresh">
</div>
In your solutions, you trying to get:
<div class="tool-button">
<div class="refresh-button">
<div class="icon-tool-button"> // this
</div>
</div>
</div>
If you delete spaces on string, you can access your element.
The solution is
$(".tool-button.refresh-button.icon-tool-button")
Chaining selectors will query for elements that contain all of the selectors.
Detailed answer: https://stackoverflow.com/a/59406548/11969749
You can use click() method
const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();
Do you want to select first element?
const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();
I'm trying to append two spans to a div using the following code:
d3.select("#breadcrumb")
.append("span")
.attr("class","breadcrumb-link")
.text(d.name)
.append("span")
.text("/");
But this adds elements like:
<div id="breadcrumb">
<span>
<span>
</span>
</span>
</div>
I want to add spans as siblings:
<div id="breadcrumb">
<span>
</span>
<span>
</span>
</div>
I know this can be done by first selecting the div and then using 2 statements for each span. Can I do this in a single chained statement?
d3.js is based on the idea of data-driven documents. That said, typically you'll have data as an array that you gonna join with a selection.
With that in mind you could try a simple hack by joining the selection d3.select("#breadcrumb") with an "artificial" array [1, 2]. This would look like this:
d3.select("#breadcrumb").data([1, 2]).enter().append('span')...
Note, the call of enter().
If you wanna set different class attributes, you could stuff this data into the data array.
Below is the code I am working with, as you can see, there is an id named "parent" and an id named "grandchilden". My goal is to get the content inside of this div "grandchildren". How can I achieve it?
I've tried $(this).closest('.grandchildren'), but didnt work.
<div id="parent">
<a href="#">
<div>
<p id="grandchildren">
This is a content
</p>
</div>
</a>
</div>
If you have a ID on that div you can use $('#grandchildren').html()
If you don't have a ID for it, what is the pattern? div > a > div > p ? In that case you can use this:
$('div#parent > a > div > p').html();
Demo here
Please notice the difference between .text() and .html(), if you just need to get text use .text() instead of .html()
If you have a reference like this you could use find which searches downwards, with the selected element as starting point:
$(this).find('.someClass')
$('#parent').find('#grandchildren').text();
I have the following HTML structure:
<div class="s1>
<div class="s2">
<span class="span1">
<span>text</span>
</span>
</div>
</div>
Currently I am selecting the most nested span with the following selectors:
$(".s1").find(">:first-child").find(">first:child").find(">:first-child")
Is there a more efficient way to select that inner span?
Edit: Div with class s1 is already cached, so I cant use $("selector").
You can access it through span1 class,
$('.span1 span')
There are several options, something like this should work:
.s1 .s2 .span1 span:first-child
I'm not sure how specific you need the selector to be.
Give it a class or Id and then try accessing it
<span id="sp1" class="sp1">text</span>
$('#sp1') or $('.sp1')
// Or
$('.span1 > span')
If you are talking about efficiency the fastest is to define an id for the span:
<span id="spanX">text</span>
$('#spanX')
Because this selector maps directly to the cross-browser getElementById
If you cant touch the html for some reason the fastest way would be:
$('.span1 span:first')
$('div.s1 > div:first-child > span:first-child > span:first-child')
Do you need anything more specific than that?
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