Trying to set properties/attributes on nested objects with jQuery

Question

I have the following code ... I simplified it by not including the options in the select tags:

    <div>
        Show all tasks where assigned to <span><strong></strong>
           <select></select></span>
        and project is <span><strong></strong>
            <select></select></span>
        and status is <span><strong></strong>
            <select></select></span>
        and category is <span><strong></strong>
            <select></select></span>
    </div>

When the page loads I would like to do the following:

Display the text of the selected item in each select input between the strong tags.
Hide the select tag.

When a user clicks on the strong I would like for it to hide strong tag and show the select.

That being said, I have it working if I assign specific id values to each, for lack of a better term, filter. I would like to streamline my jquery so I can avoid the extra HTML.

Hopefully that made some sense ... here is where I am at with my jquery ...

$(function () {
    $("#filter select").hide();

    $("#filter strong").each(function () {
        $(this).html($(this).siblings("select:first option:selected").text())); // not working
    });

    $("#filter strong").each(function () {
         $(this).bind("click", function () {
             $(this).css("display", "none"); // not sure if this will work, need to get the first part working
             $(this).siblings("select:first").css("display", "");
         });
    });
});

I'm going to keep working on this, but would appreciate any help provided! I think my struggle is with how sibling selectors work in jQuery.

Update

Thanks @alex and @Andy ... here is the final working solution:

$(function () {
    $("#filter select").hide();

    $("#filter strong").html(function () {
        return $(this).next().find(":selected").text(); 
    })

    $("#filter strong").each(function () {
        $(this).bind("click", function () {
            $(this).css("display", "none");
            $(this).siblings("select:first").css("display", "");
        });
    });
});

Andy · Accepted Answer · 2011-01-08 15:16:04Z

1

you could use:

$('strong').click(function(){ $(this).hide().next().show(); });

here you have one too many brackets -> .text());

 $("#filter strong").each(function () {
     $(this).html($(this).siblings("select:first option:selected").text())); // not working
 });

answered Jan 8, 2011 at 15:16

Andy

30.2k9 gold badges43 silver badges59 bronze badges

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

3 Comments

mattruma Over a year ago

Thanks ... I removed the extra bracket ... it still populate the strong tag with the same text, the first select tag.

Andy Over a year ago

you could try it like this: $('strong').html(function(){ return $(this).next().val(); });

Andy Over a year ago

or $('strong').html(function(){ return $(this).next().find(':selected').text(); });

alex · Accepted Answer · 2011-01-08 15:15:05Z

1

I think my struggle is with how sibling selectors work in jQuery.

The siblings() method will select all elements that are neighbours of the current element. It is essentially the same as...

var element = $('#something'),

    siblings = element.parent().children().not(element);

You may also be trying to select too much with your selector string passed to siblings().

Try using...

.siblings("select:first").find("option:selected")

edited Jan 8, 2011 at 15:15

answered Jan 8, 2011 at 15:08

alex

492k205 gold badges890 silver badges992 bronze badges

4 Comments

mattruma Over a year ago

So let's say I want just the first select sibling for each strong tag ... how would I do that?

mattruma Over a year ago

Specifically this code ... $(this).html($(this).siblings("select:first option:selected").text()));

alex Over a year ago

@mattruma In your case, I would probably use next('select').

mattruma Over a year ago

So if you take this code ... $("#filter strong").html("Test"); ... what would you replace the "Test" with to display the text of the selected item of the first select tag that comes after the strong tag? Appreciate your help so far!

Collectives™ on Stack Overflow

Trying to set properties/attributes on nested objects with jQuery

Update

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related