How to change background color conditionally?

Question

I am trying to change the color of background. I am changing every odd results to light green(#f0f5f5) so when the result ends in even number, I get big white space. I would like to change background color of pagination section to light green when the result ends in even number. Sear search results displays only 5 results so it could be 2th and 4th.

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.hits({
    container: '#Algolia_Result',
    transformItems: function (items) {
      return items.map(function (item) {
        if (item.objectType === 'Startup') {
          item._isDescription = isNotNull(item.description);
  
        } else if (item.objectType === 'NEWS') {
          item._isSource = isNotNull(item.source);

        } else if (item.objectType === 'Comment') {
            
          item._isComment = isNotNull(item.comment);
         
     
        return item;
      });
    },
     templates: {
      empty: '<div id="empty">No results have been found for {{ query }}.</div><br>',
      item: `
        <a href="{{linkUrl}}" target="_blank">
        <div class="algolia_container">
            <div class="item1">
                <div id="images"><img src="{{logoUrl}}" alt="{{hits-image}}" id="hits-image"></div>
                <div id="objTyeps"><span class="objectType {{objectCss}}">{{objectType}}</span></div>
            </div>
            <div class="item2">
                <div id="objectTitle">
                <span id="titleForDisplay">{{#helpers.highlight}}{ "attribute": "titleForDisplay" }{{/helpers.highlight}}</span>
                </div>
            </div>
            <div class="item3">


                {{#_isLocation}}
                    <div id="location">{{#helpers.highlight}}{ "attribute": "location" }{{/helpers.highlight}}</div>
                {{/_isLocation}}
                
            </div>
        </div></a>
      `, 
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

#Algolia_Result > div > div > ol > li:nth-child(odd){background-color: #f0f5f5;}

.ais-Pagination-item {
    display:inline;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #E8E8E8;
    border-radius:5px;
    font-size:18px;
}

.ais-Pagination-list {
    text-align: center;
    height:45px;
    padding-top: 10px;
}

.ais-Pagination-item:hover {
  background-color: #DCDCDC;
  transition: background-color .2s;
}

.ais-Pagination-item--selected{
  background-color: #E8E8E8;
}

<div id="searchbox"></div>      
    <div id="results">
        <div id="Algolia_Result"></div>
        <div id="pagination"></div>
    </div>
                        

This is ok

This need be fixed as if the background color of pagination area is the same as the last result, it must be green

This is what I get in the console.

Answer 1

You can color background of the pagination row by using JavaScript to count the number of results and apply color if the number of results is even.

Check out the example below.

Example 1 is with an odd number of result rows and the CSS works fine, same as your working example.

Example 2 is with an even number of result rows and uses the JS code to style the pagination background.

// Count the rows
let numRows = document.querySelectorAll('#example-2 .row').length
// If the number of rows is even
if (numRows % 2 == 0) {
  // Apply the background color to the pagination row
  document.querySelector('#example-2 .pagination').style.backgroundColor = '#eee'
}

.container {
  border: 1px solid #000;
  margin-bottom: 5px;
}

.row:nth-child(odd) {
  background-color: #eee;
}

Example 1
<div id="example-1" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
  </div>
  <div>
    <div class="pageination">Pagination Row</div>
  </div>
</div>

Example 2
<div id="example-2" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
  <div>
  <div>
    <div class="pagination">Pagination Row</div>
  </div>
</div>

EDIT: So in your example, you would add the following JavaScript.

<script>
  let numRows = document.querySelectorAll('.ais-Hits-item').length
  if (numRows % 2 == 0) {
    document.querySelector('.ais-Pagination-list').style.backgroundColor = '#eee'
  }
</script>

EDIT 2: Looking at your code sandbox I can see that the issue is that the JS that counts the number of rows is being run before the rows have been rendered by Algolia.

To solve this issue we need to place our row counting JS into an Algolia callback that is ran after the rows have been rendered. We can use the algolia search.on('render', ...) event callback.

Try this:

search.on('render', () => {
  let numRows = document.querySelectorAll('.algolia_container').length;
  if (numRows % 2 === 0) {
    document.querySelector('#pagination').style.backgroundColor = 'red';
  } else {
    document.querySelector('#pagination').style.backgroundColor = 'transparent';
  }
});