Question about cheerio - Githubissues

jerryc127 commented 4 years ago

Check List

Please check followings before submitting a new issue.

[ ] I have already read Docs page & Troubleshooting page
[ ] I have already searched existing issues and they are not help to me
[ ] I examined error or warning messages and it's difficult to solve
[ ] Using the latest version of Hexo (run hexo version to check)
[ ] Node.js is higher than 8.6.0

Question

Environment & Settings

Node.js & npm version

Your site _config.yml (Optional)

Your theme _config.yml (Optional)

Hexo and Plugin version(npm ls --depth 0)

Your package.json package.json

Others

i trying to use the script to add something it is my code

var cheerio = require('cheerio');

function sw(source) {
  var $ = cheerio.load(source, {
    decodeEntities: false
  });

  var $index = $('<div class="recent-post-item article-container ad_height"></div>')

  $('.recent-post-item.article-container').each((i, o) => {
    if (i !==0 &&  i%3==0 ) {
      $(o).after($index_ad)
    }
  })

  return $.html();
}

hexo.extend.filter.register('after_render:html', sw);

i want to add the <div> when i%3==0. but it seen like didn‘t work

the result

I want

SukkaW commented 4 years ago

I can't understand your code actually.

Your declare a variable $index:

  var $index = $('<div class="recent-post-item article-container ad_height"></div>')

So where is $index_ad come from?

      $(o).after($index_ad)

Also, this is what you should do if you are going to add a piece of html (in string) to dom:

      $(o).after('<div class="recent-post-item article-container ad_height"></div>');

More details about cheerio's API can be found here: https://cheerio.js.org/

jerryc127 commented 4 years ago

Just my copy problem It all “$index_ad”

jerryc127 commented 4 years ago

I can't understand your code actually.

Your declare a variable $index:
  var $index = $('<div class="recent-post-item article-container ad_height"></div>')
So where is $index_ad come from?
      $(o).after($index_ad)
Also, this is what you should do if you are going to add a piece of html (in string) to dom:
      $(o).after('<div class="recent-post-item article-container ad_height"></div>');
More details about cheerio's API can be found here: https://cheerio.js.org/

I want to insert which index is 3 6 9 It seen like only insert one ( see the photo)

SukkaW commented 4 years ago

Since there are already an element inserted to the rendered html, which means the hexo's filter API works exactly as it should be, which also means the problem is at your code.

You could open a issue at cheerio team and investigate what went wrong.

curbengh commented 4 years ago

Assigning $index_ad as a string (not cheerio selector) works for me,

var cheerio = require('cheerio');

function sw(source) {
  var $ = cheerio.load(source);

  var $index_ad = $.html($('.ad_height'));

  $('.recent-post-item.article-container').each((i, o) => {
    if (i !==0 &&  i%3===0 ) {
      $(o).after($index_ad)
    }
  })

  return $.html()
}

const div = `
<html><head></head><body>
<div class="recent-post-item article-container ad_height">foo</div>
<div class="recent-post-item article-container">a</div>
<div class="recent-post-item article-container">b</div>
<div class="recent-post-item article-container">c</div>
<div class="recent-post-item article-container">d</div>
<div class="recent-post-item article-container">e</div>
<div class="recent-post-item article-container">f</div>
<div class="recent-post-item article-container">g</div>
<div class="recent-post-item article-container">h</div>
<div class="recent-post-item article-container">i</div>
</body></html>`

console.log(sw(div))

<html><head></head><body>
<div class="recent-post-item article-container ad_height">foo</div>
<div class="recent-post-item article-container">a</div>
<div class="recent-post-item article-container">b</div>
<div class="recent-post-item article-container">c</div><div class="recent-post-item article-container ad_height">foo</div>
<div class="recent-post-item article-container">d</div>
<div class="recent-post-item article-container">e</div>
<div class="recent-post-item article-container">f</div><div class="recent-post-item article-container ad_height">foo</div>
<div class="recent-post-item article-container">g</div>
<div class="recent-post-item article-container">h</div>
<div class="recent-post-item article-container">i</div><div class="recent-post-item article-container ad_height">foo</div>
</body></html>

Initially I had an issue with var $index_ad = $('.ad_height').html() because $('.ad_height').html() returns foo instead of the whole element <div class="recent-post-item article-container ad_height">foo</div>. This comment mentions it should be $.html($('.ad_height')). I find the syntax to be clunky, perhaps that's how jQuery works I guess.

jerryc127 commented 4 years ago

@SukkaW @curbengh thx

hexojs / hexo

Question about cheerio #3911

Check List

Question

Environment & Settings

Others