Select a single element by class name between multiple element with the same class name?

Question

I have multiple elements with the same class name. I want to store hexpaletteval of the column (and rgbpaletteval, but I was thinking about converting it directly) at click of the corresponding favcolor, but I'm not sure how to achieve this.

Using my code (below) it obviously changes the background color to yellow to ALL hexpalettecolor, not only one. I change the color to have a visual to what I'm doing.

I want to be able to chose only the value of hexpalettecolor in the same column, so if favcolor 1 I want to select hexpalettecolor 1

$(".favcolor").click(function() {
  $(".hexpaletteval").css("background-color", "yellow");
  $.ajax({
    type: "POST",
    url: "/favorite",
    data: {
      colorhex: $(".hexpaletteval").val(),
      colorrgb: hextorgb(colorhex),
    },
    success: function(data) {
      console.log(data);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="space">
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>1</p>
      </div>
      <div class="rgbpaletteval">
        <p>1</p>
      </div>
    </div>
    <button class="favcolor">1</button>
  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>2</p>
      </div>
      <div class="rgbpaletteval">
        <p>2</p>
      </div>
    </div>
    <button class="favcolor">2</button>
  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>3</p>
      </div>
      <div class="rgbpaletteval">
        <p>3</p>
      </div>
    </div>
    <button class="favcolor">3</button>

  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>4</p>
      </div>
      <div class="rgbpaletteval">
        <p>4</p>
      </div>
    </div>
    <button class="favcolor">4</button>
  </div>
  <div class="colorcoloumn" id="5">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>5</p>
      </div>
      <div class="rgbpaletteval">
        <p>5</p>
      </div>
    </div>
    <button class="favcolor">5</button>
  </div>
</div>
</div>

score 1 · Accepted Answer · answered Jun 27 '22 at 10:56

To find the content related to the button which raised the event you can use the this keyword in the event handler along with closest() and find() to traverse the DOM.

Also, .hexpaletteval is a div element and so has no val() to read. I presume that you're intending to read the text inside the element, so this should be text() instead.

Finally, note that I changed the use of css() in your JS code to addClass() instead. This is better practice as it removed the styling data from your JS code.

$(".favcolor").click(function() {
  let $column = $(this).closest('.colorcoloumn');
  let $hexpaletteval = $column.find(".hexpaletteval").addClass('selected');
  
  let value = $hexpaletteval.text().trim();
  console.log(value);
});

.selected { 
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="space">
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>1</p>
      </div>
      <div class="rgbpaletteval">
        <p>1</p>
      </div>
    </div>
    <button class="favcolor">1</button>
  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>2</p>
      </div>
      <div class="rgbpaletteval">
        <p>2</p>
      </div>
    </div>
    <button class="favcolor">2</button>
  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>3</p>
      </div>
      <div class="rgbpaletteval">
        <p>3</p>
      </div>
    </div>
    <button class="favcolor">3</button>

  </div>
  <div class="colorcoloumn">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>4</p>
      </div>
      <div class="rgbpaletteval">
        <p>4</p>
      </div>
    </div>
    <button class="favcolor">4</button>
  </div>
  <div class="colorcoloumn" id="5">
    <div class="colorcoloumntext">
      <div class="hexpaletteval">
        <p>5</p>
      </div>
      <div class="rgbpaletteval">
        <p>5</p>
      </div>
    </div>
    <button class="favcolor">5</button>
  </div>
</div>
</div>

It works, thank you. I have a question: why you use `let $column` and `let $hexpaletteval` instead of `let coloumn` and `let hexpaletteval`? — CtrlValCanc, Jun 27 '22 at 11:33
Glad to help. The `$` prefix is used to denote that the variable contains a jQuery object, more info here: https://stackoverflow.com/q/14362939/519413 — Rory McCrossan, Jun 27 '22 at 12:33

Select a single element by class name between multiple element with the same class name?

1 Answers1