Comments (6)
https://github.com/fefit/visdom#feature-flags
from visdom.
@tctco 操作元素的方式和jq里操作DOM元素的方式类似,比如像下面这样:
let html = r#"
<div>
<img src="a.png" />
<img src="b.jpg" />
<img src="c.webp" />
</div>
"#;
let fragement = Vis::load(html)?;
let mut root_div = fragement.children("div");
let mut img_list = root_div.find("img");
img_list.for_each(|_, ele| {
// 这里ele实现了IElementTrait,支持类似DOM里的element元素的一些操作
let attr_src = ele.get_attribute("src").unwrap().to_string();
if attr_src.ends_with(".png") {
// 使用Vis::dom将element对象转换为一个类似jq的Elements集合对象
// Elements对象上包含了append/insert/empty
Vis::dom(ele).remove();
}
true
});
println!("{}", root_div.outer_html());
let mut svg = Vis::load("<svg></svg>")?;
root_div.append(&mut svg);
println!("{}", root_div.outer_html());
可以参看节点操作的wiki,另外注意引入包的时候,feature必须开启insertion
(删除的话还需要开启destory
),才能引入以上节点操作部分的代码。
from visdom.
谢谢!
还有一个问题,如果我想替换一个元素应该怎样做呢?
img_list.for_each(|_, ele| {
let attr_src = ele.get_attribute("src").unwrap().to_string();
if attr_src.ends_with(".png") {
let mut new_ele = Vis::load("<svg></svg>").unwrap();
Vis::dom(ele).insert_after(&mut new_ele).remove(); // panic!
}
true
});
我既不熟悉jq也不熟悉rust :(
from visdom.
@tctco 的确可以用insert_before
和remove
两个方法来进行replace
的操作,使用的方式大概类似
if attr_src.ends_with(".png") {
let mut img = Vis::dom(ele);
let mut svg = Vis::load("<svg></svg>").unwrap();
svg.insert_before(&mut img);
img.remove();
}
不过这个方法针对 img
元素失效了,这是个bug,我晚点来排查修复一下。另外这种替换的需求可能还是提供类似jq的replace_with
API操作比较好,只需要一次操作就好,到时使用的方式大概类似:
if attr_src.ends_with(".png") {
let mut img = Vis::dom(ele);
let mut svg = Vis::load("<svg></svg>").unwrap();
img.replace_with(&mut img);
}
需要到晚点发版才能一并提供了。
from visdom.
Cool! 期待.jpg
再次感谢!!!
from visdom.
@tctco replace_with
方法已经在新发布的 0.5.4
版本中提供,并修复了 insert_before
img 等标签不生效的问题。如果使用中还遇到啥问题,欢迎随时反馈!感谢!
from visdom.
Related Issues (20)
- error: failed to get `mesdoc` as a dependency of package `visdom v0.1.4 HOT 1
- No problem, my bad :(
- Please add support for html method for all elements HOT 5
- Navigating sideway with `find` method HOT 2
- set_html and replace_with seems not work HOT 6
- 这么好的项目为什么这么少人知道? HOT 1
- 不可用 HOT 2
- `rphtml` and `htmlentities` APIs changed HOT 3
- Stripping class entirely HOT 2
- Does this support xpath selectors ? HOT 4
- 带:冒号的怎么解析? HOT 9
- 缺少类似jquery的clone HOT 6
- `Vis::load`返回的结果应该自动选中root元素 HOT 2
- 内存泄漏 HOT 6
- 如何获取节点的tag name(节点名称)? HOT 3
- 将`Result<Elements, Box<dyn Error>>` 改为`Result<Elements, Box<dyn Error + Send>>` HOT 2
- 是否有更好的方式获取 select 元素的值? HOT 4
- Opposite of .has() HOT 4
- doc.find("p:contains('好用')" panicked, only when Chinese characters appear in contains() HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from visdom.