Question 11423 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

querySelector div < child // .class[dataField] < .class – Jquery

I’m not really well educated in jQuery, but I need a selector for the following:

<div class="shepherd-step shepherd-theme-dark shepherd-has-title shepherd-element shepherd-element-attached-top shepherd-element-attached-center shepherd-target-attached-bottom shepherd-target-attached-center shepherd-open shepherd-enabled" 
        data-id="DataType">
    <div class="shepherd-content">
        <header><h3 class="shepherd-title">Data Type</h3></header>
        <div class="shepherd-text"><p>Choose Your Desired Data Type!</p></div>
        <footer><ul class="shepherd-buttons">
            <li><a class="shepherd-button shepherd-button-secondary">Close</a></li>
            <li><a class="shepherd-button shepherd-button-example-primary">Next</a></li></ul>
        </footer>
    </div>
</div>

Fields of Interests: shepherd-step / data-id="DataType" / shepherd-button-example-primary

but I have a knowledge gap to handle it with JQuery

I tried something like this: .shepherd-step[data-id="DataType"] > .shepherd-button-example-primary

to address [data-id="DataType"] working fine, but I want the button and not the whole div

Tags:

2

Answers


  1. 0

    It is pretty simple to do you just have to use $("CSS selector") you can use all the CSS selectors in jquery to select a certain element from DOM.

    **Here is this example I changed the text of both the buttons using jQuery **

    $(".shepherd-button-secondary").text("Changed From Script Close Button");
$(".shepherd-button-example-primary").text("Changed From Script Next Button");
    <div>
<div class="shepherd-content">
        <header><h3 class="shepherd-title">Data Type</h3></header>
        <div class="shepherd-text"><p>Choose Your Desired Data Type!</p></div>
        <footer><ul class="shepherd-buttons">
            <li><a class="shepherd-button shepherd-button-secondary">Close</a></li>
            <li><a class="shepherd-button shepherd-button-example-primary">Next</a></li></ul>
        </footer>
    </div>
</div>


<!-- Importing the Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    Login or Signup to reply.
  2. 0

    Remove the > from your selector so it becomes:

    .shepherd-step[data-id="DataType"] .shepherd-button-example-primary

    The use of the Child Combinator > means that the button must be a direct child of the shepherd-step div. This is the reason it did not work. By removing the child combinator, you’re using the Descendent Combinator, and the button is a descendent of the div; therefore, the button will be found.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search