Search code examples
javascriptjqueryfindparentsiblings

Using the find function to locate a sibling value

I am attempting to get the value of .postingTitle for the specific job record that the user clicks "Apply" on. To do this, I am attempting to use jobTitle = $('.applyButton').parents().find('.postingTitle').val(); in order to find the postingTitle.

As of now, I do not get anything to populate. The output is solely my global variable jobTitle = '';. Does anyone see why my find function isn't working?

The commented out code in the JS is other methods I have tried.

JS

var jobTitle = '';
$('.applyButton').on('click', function (event) {
    //jobTitle = $('.applyButton').siblings().find('.postingTitle').val();
    jobTitle = $('.applyButton').parents().find('.postingTitle').val();
    //jobTitle = $(this).closest('.postingTitle').val();
    $('#jobTitle').html(jobTitle);
    console.log(jobTitle);
});

PHP

foreach ($career_rows as $career_row) {
        $category = $career_row['category'];
        $job_title = $career_row['job_title'];
        $job_description = $career_row['job_description'];
        $job_requirements = $career_row['job_requirements'];
        $job_status = $career_row['active'];
            echo '<div class="posting">';
                echo '<div class="postingInner">';
                    echo '<span class="postingCategory hGc">'. $category .'</span>';
                    echo '<h3 class="postingTitle">'. $job_title .'</h3>';
                    echo '<p class="postingDescription dGsmall">'. $job_description .'</p>';
                    echo '<p class="dG bold jobRequirementsTitle">Requirements:</p>';
                    //echo '<ul class="jobRequirementList">'. $job_requirements .'</ul>';
                    echo '<ul class="jobRequirementList">'. join('</li><li class="dGsmall">',preg_split('/@@@/',$job_requirements)) .'</ul>';
                    echo '<div class="applyButtonWrap"><button class="buttonInv2 applyButton">Apply</button></div>';
                echo '</div>';
            echo '</div>';
    }
Solution

  • .val() only works for input, select, textarea, and maybe a few others. If you want to get the text inside of another element, you would use .text(), and since .postingTitle is an h3, you would want to do:

     jobTitle = $(this).closest('.postingInner').find('.postingTitle').text();