Compare prop "title" and "id" of different elements if they match

Question

html:

<div class="box-one">
 <img title="element_a">
 <img title="element_b">
 <img title="element_c">
 <img title="element_d">
</div>

<div class="box-two">
 <div id="element_a"></div>
 <div id="element_b"></div>
 <div id="element_c"></div>
 <div id="element_d"></div>
</div>

How can I check (with jQuery) by clicking on an <img> at "box-one", if there is also a <div> that machtes with the ID in "box-two"?

Example:

If I click on <img title="element a">, the <div id="element a"> should be the only one that got an extra class called "found".

My bad try:

$('.box-one img').click(function() {
    $(this).each( function(){

        var elementTitle = $('.box-one img').prop('title');
        var elementTable = $('.box-two div').prop('id');

        // this part is a shame, sry 4 that //
        if (elementTitle) == (elementTable) {
            $(this).addClass("found");
        }

    });
});

First of all, there is a problem with you id used. You should only specify one id ( https://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids ) not 'element a' — deepak thomas, Jan 03 '20 at 08:19
if you correct that then $('.box-one img').click(function() { var title = $(this).attr('title'); $('.box-two #'+title).addClass('found'); }); is enough for you. — deepak thomas, Jan 03 '20 at 08:20
Yes, you are right, I just forgot the "_" at the IDs here - my fail. — Pepe, Jan 03 '20 at 08:21
Btw, you cannot use HTML comments syntax inside Javascript code. Use `// ` for line comments, and `/* comments here */` for block comments. — connexo, Jan 03 '20 at 08:58
You are right, I have corrected it - it was just 4 stackoverflow, its not inside the live code ;) — Pepe, Jan 03 '20 at 09:01

score 1 · Answer 1 · answered Jan 03 '20 at 08:16

<div class="box-one">
 <img data-title="element a">
 <img data-title="element b">
 <img data-title="element c">
 <img data-title="element d">
</div>

<div class="box-two">
 <div id="element a"></div>
 <div id="element b"></div>
 <div id="element c"></div>
 <div id="element d"></div>
</div>



const boxOne = document.querySelectorAll('.box-one img');
const boxTwo = document.querySelectorAll('.box-two div');

// boxOne[0].dataset.title - get title for the first element
// boxTwo[0].id - get id for the first element

    boxOne.forEach((item) => {
      boxTwo.forEach(div => {
        if (item.dataset.title === div.id) {
          // your custom logic
        }
      })
    })

Thx for help - looks professional - I am not sure how to implantate this. I miss the click function and so on, or I am wrong? — Pepe, Jan 03 '20 at 08:35

score 1 · Answer 2 · answered Jan 03 '20 at 08:22

Try this.

I think you need each loop for a divs in box-two, instead of an clicked image, so you can compare the title of clicked image with all id of div in box-two.

$('.box-one img').click(function() {
    var elementTitle  = $(this).prop('title);

    $('div.box-two').find('div').each( function(){
        var elementTable = $('.box-two div').prop('id');

        <!-- this part is a shame, sry 4 that --->
        if (elementTitle) == (elementTable) {
            $(this).addClass("found");
        }

    });
});

connexo · Answer 3 · 2020-01-03T08:58:48.693

This is really easy to achieve without any jQuery. I have added some basic CSS so things can be tried out. Find the code commented below:

const boxOne = document.querySelector('.box-one');

// we're adding a so-called "delegate listener" on the parent element of the images
// click events "bubble" upwards in the DOM, we're catching it at <div class="box-one">
boxOne.addEventListener('click', function(event) {
  // the element that received the click is available as event.target
  if (event.target.tagName === 'IMG' && event.target.title) { // if an img was clicked
    // find the div whose id corresponds to the title of the img that was clicked
    const div = document.getElementById(event.target.title);
    if (div) { // if that div exists
      div.classList.add('found'); // add found to its classlist
    }
  }
})

.box-one {
  border: 1px solid #f2f2f2;
}

.box-one img {
  background-color: #f2f2f2;
  padding: 10px;
}

.box-two {
  border: 1px solid #e8e8e8;
}

.box-two div {
  border: 1px solid #ddd;
  padding: 10px;
}

div.found {
  border-color: green;
}

div.found::before {
  content: "Found!";
}

<div class="box-one">
  <img title="element a">
  <img title="element b">
  <img title="element c">
  <img title="element d">
</div>

<div class="box-two">
  <div id="element a"></div>
  <div id="element b"></div>
  <div id="element c"></div>
  <div id="element d"></div>
</div>

Also big thx for your help, but I like BRO_THOM jQuery way a bit more. — Pepe, Jan 03 '20 at 08:58
@Pepe I highly recommend staying away from jQuery until you are already very proficient in native Javascript. — connexo, Jan 03 '20 at 09:00

score 0 · Answer 4 · answered Jan 03 '20 at 08:12

0

I found this while searching on SO: https://stackoverflow.com/a/3373767/9590929

Also with vanilla JavaScript, you don't need the hash (#) e.g. document.getElementById('id_here') , however when using jQuery, you do need to put hash to target elements based on id just like CSS.

answered Jan 03 '20 at 08:12

tbijl

27
8

Thx 4 the tip, I will take a look. – Pepe Jan 03 '20 at 08:14

BRO_THOM · Accepted Answer · 2020-01-03T08:59:44.380

0

Your if-statement is incorrect and might cause instability.

$('.box-one img').click(function() {
    $(this).each( function(){

        var elementTitle = $('.box-one img').prop('title'); // wrong, will always get the title for the first .box-one img
        var elementTable = $('.box-two div').prop('id'); // wrong, will always get the id for the first .box-two div

        if (elementTitle == elementTable) {
            alert("found");
        }

    });
});

To comply with your answer you could do something like this

$(".box-one img").on("click", function () {
    var title = $(this).prop("title");
    $(".box-two #" + title).addClass("found");
});

edited Jan 03 '20 at 08:59

answered Jan 03 '20 at 08:22

BRO_THOM

824
9
24

Thx for help, I tried this one, but now I get always "found". – Pepe Jan 03 '20 at 08:34
This is because you're always getting the `prop` for the first elements found that match `.box-one img` and `.box-two div`. In other words, `elementTitle` and `elementTable` are always `element a` and `element a` – BRO_THOM Jan 03 '20 at 08:37
@Pepe correct, I've revised my answer to comply with your needs. – BRO_THOM Jan 03 '20 at 08:42
1

Thx for your update, but I get "TypeError: $(...).addclass is not a function" – Pepe Jan 03 '20 at 08:53
@Pepe Minor typo, it's supposed to be `.addClass`. Sorry about that. – BRO_THOM Jan 03 '20 at 08:54
Ah, damn, I also missed it ^^ - now it works perfect - big thx! – Pepe Jan 03 '20 at 08:57

score 0 · Answer 6 · answered Jan 03 '20 at 08:40

Please make it simple and ignore container box-two because your already put the elementId in your box one image attributes.

$('.box-one img').click(function() {
     var target_id = $(this).attr('title');
     $('#'+target_id).addClass("found");
});

Compare prop "title" and "id" of different elements if they match

6 Answers6