jQuery complex selector with multiple classes in single element

Question

I'm having some issues using jquery to wrap an block around a tag, I think the biggest problem I am having is with the jquery selector, but I'm very new to jquery so I'm not sure where exactly the problem is.

I have the following html

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

I need to use jquery to wrap a tag around each tag and also insert a new li element between the two existing, the end result after the jquery has made its modifications should be the following:

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <i class="icon-circle-arrow-left">
                <a href="#" class="flex-prev">Previous</a>
            </i>
        </li>
        <li>
            <i class="icon-zoom-in">
                <a href="#" id="nav-zoom-in"></a>
            </i>
        </li>
        <li>
            <i class="icon-circle-arrow-right">
                <a href="#" class="flex-next">Next</a>
            </i>
        </li>
    </ul>
</section>

any help that could be given is greatly appreciated. I searched for hours but could not figure out how to get jquery of this complexity working. Also, all of this needs to happen once the page has loaded fully, there are no other triggers than that though.

Update

I now have it semi working with the help of some of you, this is what I have so far and it works as it should, the problem is the selectors in the jquery are not specific enough, and I can not modify the html as it is being generated by a jquery plugin, so I am attempting to modify that plugin after the fact by using this little script you all are helping me with, what I have so far is the following:

The script in question generates the following html:

 <ul class="flex-direction-nav">
     <li>
         <a href="#" class="flex-prev">Previous</a>
     </li>
     <li>
         <a href="#" class="flex-next">Next</a>
     </li>
 </ul>

I added the tag with a class in order to target it through jquery, so the html now looks as follows:

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

The jquery I'm using now is the following, and it does as needed, but is not specific enough since I have more than one slider on the page.

$(window).load(function() {
    $(".flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flex-next").wrap('<i class="icon-circle-arrow-right" />');
});

This is now generating the proper html output and is working as it is supposed to, however I need it to specifically target the ul class="flex-direction-nav" that is inside of section class="flexslider shop" since there is more than one ul class="flex-direction-nav" on the page

note that i is a presentational markup. You should use em (emphasis) or (in your case) CSS. — John Dvorak
– John Dvorak, Commented Mar 5, 2013 at 7:26
Look into the .wrap, .addClass and .removeClass methods. — John Dvorak
– John Dvorak, Commented Mar 5, 2013 at 7:30
Do you just want to add an <li> tag between Previous and Next links? — Ravinder Singh
– Ravinder Singh, Commented Mar 5, 2013 at 7:33
@JanDvorak I'm using the tag because the class for it modifies the font, it works with as well, I just wrote the css using — user2134638
– user2134638, Commented Mar 5, 2013 at 7:38
@user2134638, by the way on which event you want to perform this action? — Ravinder Singh
– Ravinder Singh, Commented Mar 5, 2013 at 7:51

John Dvorak · Accepted Answer · 2013-03-05 09:32:43Z

1

For starters, I don't recommend using the  tag. It tells the browser how something should look like, not what it is.  is presentational, not semantic. The  tag (emphasis) is better (semantic), but in your case, you should probably just add .flexslider li a{font-style: italic} to your CSS.

But let's assume the extra tag is neccessary so that the elements are found by a plugin whose source code cannot be changed.

I need it to specifically target the ul class="flex-direction-nav" that is inside of section class="flexslider shop"

This should achieve the desired output from your example:

$("section.flexslider.shop ul.flex-direction-nav").each(function(){
  $(".flex-prev", this).wrap('<i class="icon-circle-arrow-left">')
  $(".flex-next", this).wrap('<i class="icon-circle-arrow-right">')
  .before(
    '<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>
  ')
)};

I have used each so that the selector section.flexslider.shop ul.flex-direction-nav is only queried once. This reduces the amount of code required and it (hopefully) improves the performance. Passing this as the second argument to jQuery limits the scope of the previous selector.

An alternative would be to use section.flexslider.shop ul.flex-direction-nav .flex-prev and section.flexslider.shop ul.flex-direction-nav .flex-next directly as the two selectors, without selecting section.flexslider.shop ul.flex-direction-nav first. Note, however, the amount of code required. Also note a less specific selector (say, .flex-direction-nav ...) would likely suffice.

edited Mar 5, 2013 at 9:32

answered Mar 5, 2013 at 7:49

John Dvorak

27.4k13 gold badges73 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2134638 Over a year ago

the extra tag is needed, also this works, however I need the jquery selector to specify the section and ul tags, otherwise it will grab to many entries, it is one specific set of tags in the document that I need to modify, not all that match what is selected thus far, Thank you so far though

John Dvorak Over a year ago

@user2134638 you can always replace an extra tag with an extra class for the purposes of selection; however, it seems like .flexslider a would do, and you don't even need to add a class.

user2134638 Over a year ago

I have more than one flexslider class on the page, I only want to target a specific one, not both. thats why the section is there to give jquery something else to target.

John Dvorak Over a year ago

@user2134638 perhaps the selectors should be section .flex-prev and section .flex-next, or something in that style? I can't tell which selectors are specific enough for your code without seeing your HTML. Perhaps you should add an ID or a class?

user2134638 Over a year ago

I've updated my original post to modify the appropriate changes made and hopefully explain better. thank you for your help so far.

|

WordPress Mechanic · Accepted Answer · 2013-03-05 07:38:32Z

0

Please check http://api.jquery.com/insertBefore/ & http://api.jquery.com/insertAfter/

$('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>').insertBefore('.flex-next').parent();

$('<i class="icon-circle-arrow-left">').insertBefore('.flex-prev');

$('</i>').insertAfter('.flex-prev');

$('<i class="icon-circle-arrow-right">').insertBefore('.flex-next');$('</i>').insertAfter('.flex-next');

It will solve your problem.

But one thing must consider, you can achieve this target by using addClass & removeClass. It depends upon your choice. Hope this will help you.

answered Mar 5, 2013 at 7:38

WordPress Mechanic

4394 silver badges11 bronze badges

1 Comment

user2134638 Over a year ago

Thank you for your help thus far, I've updated my original post to modify the appropriate changes made and hopefully explain better.

Ravinder Singh · Accepted Answer · 2013-03-05 09:39:29Z

0

Do it this way :

$(document).ready(function(){
    $(".flexslider .flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flexslider .flex-direction-nav li a.flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flexslider .flex-direction-nav li a.flex-next").wrap('<i class="icon-circle-arrow-right" />');
});

edited Mar 5, 2013 at 9:39

answered Mar 5, 2013 at 7:49

Ravinder Singh

3,1336 gold badges34 silver badges46 bronze badges

5 Comments

user2134638 Over a year ago

this works, however I need the jquery selector to specify the section and ul tags, otherwise it will grab to many entries, it is one specific set of tags in the document that I need to modify, not all that match what is selected thus far, Thank you so far though

Ravinder Singh Over a year ago

So tell me on which event you want to do this?

user2134638 Over a year ago

no event, just the window load, I'm using this as a hack to modify the navigation created by a plugin.

user2134638 Over a year ago

this still does not select only the one flex slider, I have the section tag in place specifically for targeting the correct flex-direction-nav class since I have more than one on the page.

user2134638 Over a year ago

I've updated my original post to modify the appropriate changes made and hopefully explain better. thank you for your help so far.

animuson · Accepted Answer · 2014-01-29 22:26:23Z

0

Are you looking for something like this?

var zoom = $('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');

$('.flex-next').wrap('<i class="icon-circle-arrow-right" />');
$('.flex-prev').wrap('<i class="icon-circle-arrow-left" />').parents('li').after(zoom);

Live Demo

edited Jan 29, 2014 at 22:26

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Mar 5, 2013 at 7:41

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

1 Comment

user2134638 Over a year ago

I've updated my original post to modify the appropriate changes made and hopefully explain better. thank you for your help so far.

Collectives™ on Stack Overflow

jQuery complex selector with multiple classes in single element

4 Answers 4

7 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest