Odd/Even selector with class in jquery-CodePudding

I have some jquery functions being run by clicking an <a> link deep inside the parent <div>'s UI have outlined below. I need to make sure the right function is applied as per the <div> in which it is nested when its clicked.

So, I have 3 functions to call on

$(".nectar-post-grid-item.single:nth-of-type(odd) a.link").click(function(){ ... }); This would mean all a.link buttons with the class "single" that are an odd number in the DOM use this click function $(".nectar-post-grid-item.single:nth-of-type(even) a.link").click(function(){ ... }); This would mean all a.link buttons with the class "single" that are an even number in the DOM use this click function $(".nectar-post-grid-item.double a.link").click(function(){ ... }); This would mean all a.link buttons with the class "double" in the DOM use this click function

The markup below changes on load as its random - but I need to make sure the 3 click functions I have above is applied to the correct divs based on their ordering as they appear in the DOM

If the divs appear as below all is fine and it works...

<div ></div>
<div ></div>
<div ></div>
<div ></div>

If a div with the class "double" comes in first, it messes things up and the odd / even I am using on the "single" targeted functions goes wrong and behaves incorrectly...

<div ></div>
<div ></div>
<div ></div>
<div ></div>

Is there a better way for me to write the targeting logic on the button click function?

I was hoping the odd/even would ignore the divs with "double" class - it seems it doesnt - can I adapt this code to ignore the double class?

SO, yeh, basically I want a way to target the odd divs with single applied for one click function, the even divs with single applied for another and the divs with double applied for a third. How can I get the selector to ignore the double divs and apply the correct function to the odd and even single divs?

CodePudding user response：

I really think you were close. I'm left to presume that when you formed your links, you didn't add a . You'll see why with my code below when I took the liberty of adding the links within the divs.

HTML

<div ><a href="#">Item 1</a></div>
<div ><a href="#">Item 2</a></div>
<div ><a href="#">Item 3</a></div>
<div ><a href="#">Item 4</a></div>

jQuery

$( ".nectar-post-grid-item.single:nth-of-type(odd) a" ).click( function() {
    console.log("I'm odd and single. Maybe I should do something about that.");
})

$( ".nectar-post-grid-item.single:nth-of-type(even) a" ).click( function() {
    console.log("I'm even and single. Does that make me Even Stephen?");
})

$( ".nectar-post-grid-item.double a" ).click( function() {
    console.log("I'm a double. I'm finally special.");
})

All I really did was remove the .link from your first two functions, then made a third function that was specific to the double class.

Using the example HTML that you said was problematic, if you click the first link, you'll get the double function. The other two work as expected if the order is even or odd.

CodePudding user response：

The CSS pseudo-classes child and of-type is of no use in your situation. They are blind to selectors in that they do not separate them from other classes, ids, etc. child is only concerned with a tag's position amonst it's siblings. of-type is a little more specific in that it will concern itself with a tag's tagName (ex. a, div, section, input, etc.). Also, the link within each div is meaningless in your situation because they are content of your target divs so clicking the div is the same as clicking the link unless the function invoked will behave differently somehow (very unlikely).

Use jQuery selectors :even and :odd, they will separate by index so use :even to get odd and vice versa.

$('.A:even').on('click', evenA);
$('.A:odd').on('click', oddA);
$('.B:even').on('click', evenB);
$('.B:odd').on('click', oddB);

function evenA(e) {
  $(this).append(' ODD-A');
};

function oddA(e) {
  $(this).append(' EVEN-A');
};

function evenB(e) {
  $(this).append(' ODD-B');
};

function oddB(e) {
  $(this).append(' EVEN-B');
};

<div class='A'>A1</div>
<div class='A'>A2</div>
<div class='B'>B1</div>
<div class='A'>A3</div>
<div class='B'>B2</div>
<div class='B'>B3</div>
<div class='A'>A4</div>
<div class='B'>B4</div>
<div class='A'>A5</div>
<div class='A'>A6</div>
<div class='A'>A7</div>
<div class='B'>B5</div>
<div class='A'>A8</div>
<div class='B'>B6</div>
<div class='B'>B7</div>
<div class='B'>B8</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>