简体   繁体   中英

Target multiple td cells with jquery and change them

I am a newbie to JavaScript and jQuery. I am trying to target table cells. I have this code working for me, but it only targets the first cell.

function hidestuff() {
    var thediv = $('#Chart4_div').find('.bdtablecell').eq(1);
    var text = thediv.text();
    text = text.replace(/\//g, '');
    thediv.text(text);
}

I tried this, but it didn't target all them and change it:

function hidestuff() {
    var thediv = $('#Chart4_div').find('.bdtablecell').eq(1).eq(4).eq(7).eq(10);
    var text = thediv.text();
    text = text.replace(/\//g, '');
    thediv.text(text);
}

How can I target each cell that I need too?

I also want to replace more than just the "/"symbol. I also want to change all instances of the "-" symbol to a space " ". How can I replace multiiple things?

Assuming you need the first, fourth, seventh and tenth, try this:

var thediv = $('#Chart4_div').find('.bdtablecell:eq(1), .bdtablecell:eq(4), .bdtablecell:eq(7), .bdtablecell:eq(10)')

This is using the selector :eq which works just like the function. By putting commas (,) between them in the find selector we are asking for any of the comma seperated list.

For a slightly cleaner look, you can try:

var thediv = $('#Chart4_div').find('.bdtablecell').find(':eq(1), :eq(4), :eq(7), :eq(10)')

.eq() method only returns one element and chaining it doesn't make sense. One option is using an array and the .filter() method.

var ind = [1, 4, 7, 10];

$('#Chart4_div').find('.bdtablecell').filter(function(i) {
    return $.inArray(i, ind) > -1;
}).text(function(_, currentText) {
    return currentText.replace('foo', 'bar');
});

If you are able to modify the html. Try this:

function hidestuff() {

    var thedivs = $('#Chart4_div').find('.itemsINeedToFind'); // new class, here!

    // iterate over each one cell
    thedivs.each(function() { 
        var $this = $(this);
        // replace every \ and - to a white space
        $this.text($this.text().replace(/[\s\-]+/g,' '));
    });
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM