0

I have a custom display template for search items on a SP '13 site. I need to apply a class to the middle 'cell' of each result row. I've tried using css nth-child but this does not seem to work since the results are div's within li's. I also tried applying the class with a script in the masterpage that runs on jQuery's ready method. This didn't work because it doesn't seem that the results are loaded when this method executes.

Is there a way I can conditionally apply a class or styles within the display template based on the index of the current item in the results list?

EDIT:

Below is a sample of the html structure of a Content Search WP. The CSS is the below the html works for a set of div's with float:left but does not work with a set of div's nested inside li's.

HTML:

<div style="width:360px;margin:0 auto;">
 <ul>
  <li>
    <div id="test1" class="test"></div>
  </li>
  <li>
   <div id="test2" class="test"></div>
  </li>
  <li>
   <div id="test3" class="test"></div>
  </li>
  <li>   
   <div id="test4" class="test"></div>
  </li>
  <li>
   <div id="test5" class="test"></div>
  </li>
  <li>
   <div id="test6" class="test"></div>
  </li>
  <li>
    <div id="test7" class="test"></div>
  </li>
  <li>
    <div id="test8" class="test"></div>
  </li>
  <li>
<div id="test9" class="test"></div>
  </li>
 </ul>
</div>

CSS:

.test{
    width: 50px;
    height:75px;
    float:left;
    background: grey;
}

.test:nth-child(3n-1){
    background: pink;
}

closed as off-topic by John Chapman, Robert Lindgren Mar 6 '14 at 7:02

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to SharePoint are off-topic here, but can be asked on Stack Overflow." – John Chapman, Robert Lindgren
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I'm pretty sure a CSS solution would work. What's the HTML structure of a search result item and which element do you want the CSS applied? – kei Mar 4 '14 at 22:17
  • I am applying it to the div. When I attempted to use the nth-child selector with a formula not a single one of the elements had the class applied to it. So, I assumed that bc of the way it was structured i couldn't access the div's with that property. – ExceptionLimeCat Mar 5 '14 at 18:20
  • Your selector is wrong, should be something like ul > li:nth-child(3n-1) > div for the markup above – Robert Lindgren Mar 5 '14 at 19:01
  • Meaning your problems seems not to be related to SharePoint per se, but to finding the correct selectors for your specific markup. Normally StackOverflow is the community for this type of generic web design questions. – Robert Lindgren Mar 5 '14 at 19:12
  • @RobertLindgren You are correct. I just discovered its really a web design issue. I originally thought I might need to do something in my display template. Sorry about that guys. Thanks for all your help. – ExceptionLimeCat Mar 5 '14 at 19:34
1

There is no reason the CSS would not work in a Display Template. But to answer your question, you could evaluate CurrentItemIdx and if it's odd apply a different class to it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.