Code Monkey home page Code Monkey logo

Comments (6)

tctco avatar tctco commented on August 15, 2024 1

https://github.com/fefit/visdom#feature-flags

from visdom.

fefit avatar fefit commented on August 15, 2024 1

@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.

tctco avatar tctco commented on August 15, 2024

谢谢!

还有一个问题,如果我想替换一个元素应该怎样做呢?

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.

fefit avatar fefit commented on August 15, 2024

@tctco 的确可以用insert_beforeremove两个方法来进行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.

tctco avatar tctco commented on August 15, 2024

Cool! 期待.jpg

再次感谢!!!

from visdom.

fefit avatar fefit commented on August 15, 2024

@tctco replace_with 方法已经在新发布的 0.5.4 版本中提供,并修复了 insert_before img 等标签不生效的问题。如果使用中还遇到啥问题,欢迎随时反馈!感谢!

from visdom.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.