Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

Question

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts.

I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added.

I attempted using CSS selectors like nth-child(3n+1), but that did not provide the desired outcome.

$('.article-box:nth-child(1n+3)').addClass('small-river');

I also experimented with .slice(2,3,4,5,6,7,8) but was unable to achieve the desired repetition effect.

$('.article-box').slice(3,4,5).addClass('small-river');

jquery css wordpress

Answer 1

Answer №1

To exclude specific indexes, add them to the following array. Please note that the indexing starts at 0.

 var skipIndex = [1, 2, 10, 11];

$('.article-box').each(function(index) {
  
  if(skipIndex.indexOf(index) == -1) {
    $(this).addClass('small-river');
  }
  
});

.small-river {
  background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>

Answer 2

To exclude specific indexes, add them to the following array. Please note that the indexing starts at 0.

 var skipIndex = [1, 2, 10, 11];

$('.article-box').each(function(index) {
  
  if(skipIndex.indexOf(index) == -1) {
    $(this).addClass('small-river');
  }
  
});

.small-river {
  background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>
    <div class="article-box">Lorem ipsum</div>

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

Answer №1

Similar questions

"Feeling puzzled by the intricacies of the Jquery Timer

Creating a Custom Class for a Custom Button in TinyMCE 4 Using addButton()

What could be causing the empty space on the right side of my container?

A timer created using jQuery and JavaScript

Looking to create cascading dropdown options

Employ jQuery to set values for hidden input elements

Troubleshooting JSONP Implementation with JQuery: Scope versus Async Problems

Responsive Bar Chart using jQuery Mobile and ChartJS that appears on the screen only after resizing

Chaos in the IE8 drop-down menu situation

The jQuery UI Tab is failing to scroll within its container

PHP & Ajax integration for uploading files via a Bootstrap modal dialog

Submitting a form and using Ajax to upload an image

Is there a way to execute a callback function once the page has finished loading through AJAX in

What could be causing my HTML email to appear distorted when viewed in Gmail?

Switching the class from "untoggled" items to the selected item in React

Retrieve information from a row by clicking on it, then present it in a dialog box for editing

Tips for effectively utilizing CSS classes with current-device

How can I find the hexadecimal color value from this jQuery plugin?

"Is there a way to retain the value of a variable outside of an ajax success

Retrieve Vue.js component property within an Ajax function