How do I keep Jquery from selecting an element as an array and instead select the element right next to it.

Question

<div class="row">
    <div class="col-md-2"></div>
    <div  id="homeFAQ" class="col-md-8">
        <h2>Frequently Asked Question</h2>
        <div>How much will hiring an attorney cost?</div>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
        <div>How much will hiring an attorney cost?</div>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
        <div>How much will hiring an attorney cost?</div>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
        <div>How much will hiring an attorney cost?</div>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
    </div>
    <div class="col-md-2"></div>

</div>

jQuery( 'div#homeFAQ div' ).click(function(e) { 
    e.preventDefault();

// Select the li next to the div. (just ONE though not an array of li's)
    var current = jQuery( 'div#homeFAQ div' ).next();

//display what the current variable returns.
    console.log(current);
});

so when I run this code it returns an array of elements so if I was to toggle() it will toggle all the (div#homeFAQ div li) elements. Hopefully I am explaining things right.

Answer 1 · 2018-08-24T00:05:24Z

August 24, 2018 12:05am

The selector "#homeFAQ div" will select every "div" element that is inside the one with the id of "homeFAQ". In the current code, this is a collection of 4 items.

Then, if you add a "next()" function, it will get the next element after each of those 4 div's. In this code, that will be a collection of 4 list items.

If you want only the one list item after the div you clicked on, you can use "e.target" to identify the clicked div, and then apply the "next" function to that:

  var current = jQuery(e.target).next();

Welcome to the Treehouse Community

Looking to learn something new?

Fernando Jimenez

Fernando Jimenez

How do I keep Jquery from selecting an element as an array and instead select the element right next to it.

1 Answer

Steven Parker

Steven Parker