I want to find and replace some child tags that are nested inside parent tag.
Here is my template:
<$tag$ $attribute$=$value$>
<$childTag$ $childAttr$=$childValue$ />
<$tag$/>
I apply text filtering via regex to $value$ and to $childValue$:
$value$ filter is .*sm-landing-appstore-app-1-gallery--main.*
$childValue$ filter is sm-landing-appstore-app-1-gallery__slide-img
And this is a part of an HTML document where I want to find my sm-landing-appstore-app-1-gallery__slide-img and replace it:
<div class="sm-landing-appstore-app-1-gallery__main-gallery">
<div class="sm-landing-appstore-app-1-gallery__main-gallery-frame-wr swiper-container">
<div class="sm-landing-appstore-app-1-gallery__frame sm-landing-appstore-app-1-gallery__main-gallery-frame swiper-wrapper">
<div class="sm-landing-appstore-app-1-gallery__slide sm-landing-appstore-app-1-gallery__main-gallery-slide sm-landing-appstore-app-1-gallery__main-gallery-slide--screenshot swiper-slide"
data-index="0" data-id="0">
<div id="cmp-6" class="sm-ratio sm-landing-appstore-app-1-gallery__slide-in">
<div class="sm-ratio__placeholder"></div>
<div class="sm-ratio__body">
<div class="sm-landing-appstore-app-1-gallery__slide-cv"><img
class="sm-landing-appstore-app-1-gallery__slide-img"
src="img/Fitness%20Buddy/1.jpg" alt="EasyFitness gallery 1" data-number-image="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But the syntax of my search template is incorrect.
Is finding of nested tags even possible with IntelliJ structural search?
Related
how to use id in components, the code as below:
The components code as below:Profilelist.js
<template>
<div class="col col-m-12 col-t-6 col-d-6 box-item f-software">
<div class="item animated">
<div class="desc">
<div class="image">
<a href="#popup-{{id}}" class="has-
popup"><img src="{{workpic}}" alt="" /></a>
</div>
<div class="category">{{category}}</div>
<div class="name">
<a href="#popup-{{id}}" class="has-
popup">{{project_name}}</a>
</div>
</div>
</div>
<div id="popup-{{id}}" class="popup-box mfp-fade mfp-hide">
<div class="content">
<div class="image">
<img src="{{workpic}}" alt="">
</div>
<div class="desc">
<div class="category">{{category}}</div>
<h4>{{project_name}}</h4>
<p>
{{project_content}}。
</p>
<a href="{{project_link}}"
class="btn">View Project</a>
</div>
</div>
</div>
</div>
</template>
The index file code as below:
<div class="row box-items">
<ProfileList
v-for="profile in loadedProfiles"
:key="profile.id"
v-bind:id="profile.id"
:workpic="profile.workpic"
:category="profile.category"
:project_name="profile.project_name"
:project_content="profile.project_content"
v-bind:project_link="profile.project_link"
/>
</div>
And it outcome an error code as below:
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
id="popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="{{project_link}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
You have to bind the data to your attributes and do the proper concatenation using template literals, replace your attributes following the examples
:href="`#popup-${id}`"
:src="workpic"
:id="`popup-${id}`"
:href="project_link":
For some reason Vue doesn't render {{post.title}}, {{ post.content }} brackets for me. The content is empty (look at the rendered html below), but v-bind:href="post.url" works for some reason. I'm new to Vue.js and really stuck for day now.
Backstory:
this code is Vue instant search for my Jekyll blog.
HTML
<div v-if="articles" class="large-12 columns">
<article v-for="post in itemsSearched" class="article-summary">
<header>
<h2><a v-bind:href="post.url">{{post.title}}</a></h2>
</header>
<p>{{ post.content }}</p>
<div class="large-12 column">
<a class="read-more" v-bind:href="post.url">Read More...</a>
<div class="middle_line"></div>
</div>
</article>
</div>
Rendered HTML
<article class="article-summary">
<header>
<h2></h2>
</header>
<p></p>
<div class="large-12 column">
Read More...
<div class="middle_line"></div>
</div>
</article>
Jekyll uses double curly braces itself, so you need to define custom delimiters for your Vue.
new Vue({
delimiters:['<%', '%>'],
....
})
And then use
<% post.title %>
Instead.
You can define whatever delimiters you want, I just used those as an example.
Please use v-text or v-html instead. In vue 2.0,Vue-config-delimiters was deprecated, delimiters is only avaliable in the full build.[]:https://v2.vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced
I have an html page like this:
...
<div class="container">
<div class="title">Meat</div>
<div class="someclass">
<div class="tile AAA">
<div class="text">AAA</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
<div class="someclass">
<div class="tile BBB">
<div class="text">BBB</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
</div>
<div class="container">
<div class="title">Fish</div>
<div class="someclass">
<div class="tile AAA">
<div class="text">AAA</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
<div class="someclass">
<div class="tile BBB">
<div class="text">BBB</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
</div>
...
I need to be able to get selenium click an img for a specific element (for example, i want Meat-BBB's img) but I can't find a way to get it by xpath
Any help will be appreciated...
This will click on the Meat-BBB's img:
driver.findElement(By.xpath("//div[.='Meat']/following-sibling::*[2]//img")).click();
It finds the 2nd sibling to the div element having text/innerHtml as "Meat", and then traverses to the first "img" element in it.
This will be the xpath for your Meat-BBB's img /html/body/div[1]/div[3]/div/img
You can find xpath of any element by following steps.
1. Open your HTML file with any browser
2. Press F12 and inspect that element by clicking on that element
3. Now right click in html panel on the element and click on Copy XPath
Done! Now you have XPath.
The xpath will be - yourText
//div[div[text()='yourText']]/descendant::img
To make this Xpath more Generic , we can define a string like
// assign the value under which you want to click image Meat or Fish
String classTitle = "Meat";
and chage the xpath as follows:
//div[.='+classTitle+']/following-sibling::*[2]//img")
How to get Emmet codding to get html structure from this code:
.header>.logo+.lang.+.menu+.container+.row>+.col-md-6+.col-md-6
I need to get container element outside of header element.
Use grouping or climb-up syntax
Grouping: ()
(.header>.logo+.lang.+.menu)+.container+.row>+.col-md-6+.col-md-6
Climb-up: ^
.header>.logo+.lang.+.menu^.container+.row>+.col-md-6+.col-md-6
<div class="header">
<div class="logo"></div>
<div class="lang "></div>
<div class="menu"></div>
</div>
<div class="container"></div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
See Emmet Documentation: Abbreviation Syntax
Edit: Answer updated to include climb-up syntax alternative
My _Layout.cshtml file has three "div" situated in one "div"(div id="content"). The full code is:
<body id="bckgrimg">
<div id="content">
<div id="leftcolumn">
<ul >
<li>Contact us</li>
<li>About us</li>
</ul>
</div>
<div id="centercolumn">
We'll put something useful here later
</div>
<div id="rightcolumn">
<div id="gallery">
<img src="..."/>
<img src="..."/>
<img src="..."/>
</div>
</div>
</div>
I have tried to put data by writing "some text" in xxx.cshtml but I just add new element on a web page as I have yet created in _Layout.cshtml. I just would like to put exactly data from various .cshtml files into of _Layout.cshtml.
Is it possible to put data from xxx.cshtml file into (Where it is wtiiten "We'll put something useful here later") of_Layout.cshtml?
Use sections. They enable you to insert content from any views into the layouts used by said views.