How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
Related
How to align to highest column in the next row of a loop? I would like it to look like in the first image, not the second. Divs are rendered in loop:
<div class="container">
<div class="row">
<? foreach($a as $b): ?>
<div class="col-xs-12 col-sm-6 col-md-4"" >
$b->foo
</div>
<? endforeach ?>
</div>
</div>
First image (undesirable):
Second image (desirable solution):
This is a side effect of floating, you will need to clear the float on every x-th element, with different “x” for the sm and md breakpoints.
The nth-child selector helps with that. To not have to select the columns based on any specific col-xy-foo class, I would simply go with the child selector here, .row > :nth-child(…), the row itself made more uniquely selectable by an additional class or id, if necessary.
I don't find any clue to do that from the Semantic UI documentation/API, is there a clean way to do that?
For now, what I see is to play with :
$('.ui.accordion > .title').addClass('active')
$('.ui.accordion > .content').css('display', 'block')
You actually can do this like so:
$('.ui.accordion .individual').each(function(i){
$(this).parent().accordion('open',i);
});
You just iterate through each individual element to get its index position, then ask the parent (the accordion) to open each one. This way you still get the transition.
Here is the answer:
onOpen(commentID: string){
jQuery(`.replies${commentID}`).accordion('open', 0);
}
<div class="ui accordion replies{{commentID}}">
<div class="title" (click)="onClick(commentID);">
</div>
<div class="content">
hello
</div>
</div>
I'm working inside a templated system where i can implement code, but i can't modified the core of the file. My layer are stacked like this:
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
As you can see, my class all have the same name (layer1, layer2, etc...). I want to know if there's a way by using Javascript, Jquery or any other online client side library to modify the CSS class name so, for example, the first layer1 become level1 and the following layer1 become level 2?
Thank for your answer!
As other people already said, jQuery actually does what you want.
As long as you don't know the number of “layers” you have, you better find all elements by classname substring:
$('*[class^="layer"]')
Then you can get the list of the element classes and change old names to new ones.
Many different ways to do this:
Solution 1:
Use addClass() and removeClass()
$(".layer1").removeClass('old_class').addClass('new_class');
Replace old_class with your older class and new_class with your new class
Solution 2:
If you are able to get the element by ID
You can set the class by using .attr()
$("#id").attr('class', 'new_class');
an all around solution working with className :
var elem=document.querySelectorAll('[class^="layer"]') ;
for(i in elem){
x = elem[i].className;
var y=x.replace("layer" , "level");
elem[i].className=y||x;
}
I'm trying (and also did search here) to select a specific element without any success:
<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="optioncontent">
<div>
The element I'd like so select via CSS is the ver last div with the class filterOption filterSection. I tried:
.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child
Any idea on how this could be achieved? Help would be great!
Actually i don't know what you want, it's that using your half code to select specific one or select the last one? If that would be the following:
.filterOption.filterSection:nth-child(1){
background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
background-color:grey;
}
<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>
Here's http://jsfiddle.net/ianwong/p3s62rrm/
If you want to select from the strict closed code, you can click http://jsfiddle.net/ianwong/p3s62rrm/1/
Thank you all for your respond with help.
As Paulie_D mentioned it wont be flexible, but my code is dynamic (div class="filterOption filterSection") . And as Hashem Qolami wrote it's not possible.
I also tried :nth-last-child(1) as wong ian and ghorg12110 mentioned but it wont work as I have more child div's in div class="filterOption filterSection" and need to select the last parent div class="filterOption filterSection".
So I ended up adding an empty div in my php-code right at the end with the css-style I needed.
Not nice, but works for now.
You can try with the css3 property :
.filterOption.filterSection:nth-last-child(1);
You can use the :last-of-type selector as you can see in this Fiddle
So that you can select
<form id="filterForm">
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">ME!</p>
<div class="blablabla"></div>
</form>
with this css
.filterOption:last-of-type { color:red }
According to the W3C there's also a :last-child selector as you can check HERE but it didn't work in JSFiddle.
I have the following HTML code:
<table id="userPlaylistTable" cellspacing="0" cellpadding="0">
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 1 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 2 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 3 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
Basically, now if I define my css as:
css=table#userPlaylistTable div[class='listArrow up']
It picks the first such element it finds. But, how would I have to define my css, so that it picks second element of this type?
So, basically how would I define my css to pick a particular element, if multiple elements of the same kind exist on the page?
Could someone please help me with this query?
Thanks.
You need to do something like:
css=table#userPlaylistTable>div[class='listArrow up']:nth(1)
css=table#userPlaylistTable>div[class='listArrow up']:nth(2)
This will give you the 2nd and the 3rd instance
add [1] which is the index into the array. usually 0 based, so [1] is the second element
css: #userPlaylistTable .listArrow.up:nth-of-type[2]
Instead of [2] replace with item you want to select
Description:
id is # -- #userPlaylistTable
class by . listArrow up, but we have space between class name so replace space with . -- .listArrow.up
:nth-of-type(n) will select child