1
\$\begingroup\$

Is there is a better way of selecting the span tag that I'm dynamically adding?

Here's what I'm trying to do:

If you click the .toggle div, it shows a detailed div with the id that matches the href of the anchor tag in the particular .toggle div.

$('.toggle').click(function (e) {
  e.preventDefault();
  var elemHref = $(this).find("a").attr("href");
  var id = elemHref.replace('#', '');
  $("#"+id).toggle();
});

Before you click, when you hover over the .toggle div, it shows expand in a span tag if the details div is hidden. When you are not hovering over the appropriate .toggle div, it shows nothing if the details div is hidden and close if the details div is visible.

$('.toggle').hover(function(e) 
    {
        $(this).find("a:not(:has(span))").append('<span class="expand">expand</span>');
        $('.expand').eq(0).css({"position":"absolute", "bottom":"0", "right":"-5px"});
    }, 
    function() 
    {
        var elem = $(this).find("a");
        var elemHref = elem.attr("href");
        var visibleDetail = $(elemHref).is(":visible");
        if(visibleDetail)
        {
            $('.expand').text('close');
        }
        else
        {
            elem.empty();
        }
    }
);

I've thought that using .children might help, but is there a better way altogether than with .find()/.children()?

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.