javascript jquery load selecteditem queryselector

jquery - load html and select li button

I'm trying to import color button set from other html page and make corresponding color selected by default. these two codes work find seperately, however together, it would not make li selected when imported.

I cannot figure out how to make it import & selected all at once. How can i combine these codes in one?

<html>
<body>
<div id="colorList">
<!--//this will show when imported-->
<div class="color-button-box">
<ul>
  <li class="text"><a href="/link.." class="ivory" ></a></li>
  <li class="text"><a href="/link.." class="beige"></a></li>
  <li class="text"><a href="/link.." class="green"></a></li>
  <li class="text"><a href="/link.." class="blue"></a></li>
</ul>
</div>
<!--//this will show when imported-->
</div>
</body>
</html>


<style>
.color-button-box {}
.color-button-box li a {}
.color-button-box li.selected a {border: red 1px solid;}
.color-button-box .ivory {color: #fff;}
.color-button-box .beige {color: #eee;}
.color-button-box .green {color: green;}
.color-button-box .blue {color: blue;}
</style>

<script type="text/javascript">
$(document).ready(function(){

/*selected button*/
const selectedColor = "green";
document.querySelector(".color-button-box a."+selectedColor).parentNode.classList.add("selected");

/*import html to div #colorList*/
$("#colorList").load("/t-shirt.html .color-button-box");

});  
});
</script>

Solution

Problem is that your javascript code that set's the selected class is running before your load command has inserted the html.

So do it like this:

$(document).ready(function() {

  /*selected button*/
  const selectedColor = "green";

  /*import html to div #colorList*/
  $("#colorList").load("/t-shirt.html .color-button-box", function() {
    console.log("load Done")
    $(".color-button-box a." + selectedColor).closest("li").addClass("selected");
  });

});

Demo

$(document).ready(function() {

  /*selected button*/
  const selectedColor = "green";

  /*import html to div #colorList*/
  $("#colorList").load("/t-shirt.html .color-button-box", function() {
    console.log("load Done")
    $(".color-button-box a." + selectedColor).closest("li").addClass("selected");
  });

});

.color-button-box {}

.color-button-box li a {}

.color-button-box li.selected a {
  border: red 1px solid;
}

.color-button-box .ivory {
  color: #fff;
}

.color-button-box .beige {
  color: #eee;
}

.color-button-box .green {
  color: green;
}

.color-button-box .blue {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="colorList">
  <!--//this will show when imported-->
  <div class="color-button-box">
    <ul>
      <li class="text">
        <a href="/link.." class="ivory"></a>
      </li>
      <li class="text">
        <a href="/link.." class="beige"></a>
      </li>
      <li class="text">
        <a href="/link.." class="green"></a>
      </li>
      <li class="text">
        <a href="/link.." class="blue"></a>
      </li>
    </ul>
  </div>
  <!--//this will show when imported-->
</div>