Rename multiple css with identical name - css

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;
}

Related

Expand/Collapse all elements of a Semantic UI accordion

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>

Unable to load the data from other controller

I have a controller, which is composed of many other partial views. I wanted to use a particular section of that controller in another controller. I am able to see the design but unable to load items in it.
Let say I have one controller named "Products" within Product view folder I have _items.cshtml. I wanted to use this _items.cshtml in another controller called "placeTheOrder".
In particular section of div in placeTheOrder view I referred to #Html.Partial("~/Views/Products/_items.cshtml"). Even after doing so it is unable to load the content from _items.cshtml into placeTheOrder.
What am I doing wrong.
_items.cshtml view
<div id="accordionProduct" class="span-6 last prod-acc">
#Html.Partial("~/Views/product/_ezCpSearchBar.cshtml")
<div id="filterPanel" class="span-6 last filter-panel">
<div class="span-6 last">
<div class="filter-panel-head">
<h1>Filter</h1>
</div>
</div>
<div class="span-6 last">
<div class="filter-panel-body">
<div class="filter-panel-prop"></div>
</div>
</div>
</div>
<div id="accordionProductInner" class="span-6 last prod-acc-body">
</div>
</div>
// this is the script are where the content gets loaded into the view
<div id="TemplateFilterItem" class="hidden"></div>
<div id="TemplateLastViewItem" class="hidden"></div>
This is the place where I have refered to it in another controller
<div class="span-6" style="background-color:#d4d4d4;padding:20px;">
#Html.Partial("~/Views/product/_items.cshtml")
</div>

You can use Html.Renderpartial in your view instead
Html.RenderPartial("~/Views/ControllerName/ViewName.cshtml", ModelData);
If you are using different model for both the views then you need to make ViewModel which will include required properties.
Hope this Helps

webdriver select first sibling based on nth sibling condition

i'm writing a test case in a grid based software
I'm mostly using css selectors to select elements and perform clicking
based on the image - I'm selecting the right circled element (base don a css class that displays the blue dot ), now, based on this condition, I want to select the first sibling element - which is a "plus", basically that would open the sub grid further and allow me to run further testing
I can't seem to be able to do that -
assuming that I'm using the following sample html
<div class="td">
<a class="opener">
....
</a>
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
<a class="round-solid">
...
</a>
</div>
I can select "round-solid" - based on this, how do I select "opener" element ?
I only want the opener element for which a specific column contains the "round-solid" class

That should do the trick:
driver.findElement(By.xpath("//a[#class='round-solid']/../preceding-sibling::div/a[#class='opener']"));

How to change div values without ID or class

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.

Selenium: how to define css if webpage has mutiple elements with same name

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

Resources