getting a string from data attributes of grandchildren

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

result should be 53-66

So clicking on b2 I need a string composed from data-id of its grandchildren, joined with -.

Any help?

asked Nov 20 at 19:00

puerto

918411

1

Are you getting an error of some kind? What have you tried?
– zfrisch
Nov 20 at 19:06

@zfrisch, I tried a double each (one for children and one for grandchildren), it works, but I suppose there is a shorter way.
– puerto
Nov 20 at 19:08

are the grandchildren all going to have the same class?
– zfrisch
Nov 20 at 19:13

@zfrisch, yes, classes are the same on the same level
– puerto
Nov 20 at 19:16

add a comment |

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

result should be 53-66

So clicking on b2 I need a string composed from data-id of its grandchildren, joined with -.

Any help?

asked Nov 20 at 19:00

puerto

918411

1

Are you getting an error of some kind? What have you tried?
– zfrisch
Nov 20 at 19:06

@zfrisch, I tried a double each (one for children and one for grandchildren), it works, but I suppose there is a shorter way.
– puerto
Nov 20 at 19:08

are the grandchildren all going to have the same class?
– zfrisch
Nov 20 at 19:13

@zfrisch, yes, classes are the same on the same level
– puerto
Nov 20 at 19:16

add a comment |

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

result should be 53-66

So clicking on b2 I need a string composed from data-id of its grandchildren, joined with -.

Any help?

asked Nov 20 at 19:00

puerto

918411

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

result should be 53-66

So clicking on b2 I need a string composed from data-id of its grandchildren, joined with -.

Any help?

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

$('.b2').on('click', function(){

 //var str = ...

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

javascript jquery

asked Nov 20 at 19:00

puerto

918411

asked Nov 20 at 19:00

puerto

918411

asked Nov 20 at 19:00

puerto

918411

asked Nov 20 at 19:00

puerto

918411

asked Nov 20 at 19:00

puerto

918411

1

Are you getting an error of some kind? What have you tried?
– zfrisch
Nov 20 at 19:06

@zfrisch, I tried a double each (one for children and one for grandchildren), it works, but I suppose there is a shorter way.
– puerto
Nov 20 at 19:08

are the grandchildren all going to have the same class?
– zfrisch
Nov 20 at 19:13

@zfrisch, yes, classes are the same on the same level
– puerto
Nov 20 at 19:16

add a comment |

1

Are you getting an error of some kind? What have you tried?
– zfrisch
Nov 20 at 19:06

@zfrisch, I tried a double each (one for children and one for grandchildren), it works, but I suppose there is a shorter way.
– puerto
Nov 20 at 19:08

are the grandchildren all going to have the same class?
– zfrisch
Nov 20 at 19:13

@zfrisch, yes, classes are the same on the same level
– puerto
Nov 20 at 19:16

Are you getting an error of some kind? What have you tried?
– zfrisch
Nov 20 at 19:06

@zfrisch, I tried a double each (one for children and one for grandchildren), it works, but I suppose there is a shorter way.
– puerto
Nov 20 at 19:08

are the grandchildren all going to have the same class?
– zfrisch
Nov 20 at 19:13

@zfrisch, yes, classes are the same on the same level
– puerto
Nov 20 at 19:16

add a comment |

6 Answers
6

active

oldest

votes

If you would like to use JQuery you can use the JQuery methods find and map. Then simply use the Array method join.

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

answered Nov 20 at 19:30

zfrisch

4,39811024

that's it. thanks a lot
– puerto
Nov 20 at 19:32

add a comment |

JQuery's .map() fits this scenario nicely: http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {

  return $(element).data("id");

}).toArray().join("-");

In the comments you stated they all had the same class, so can use .find(".class")

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:29

freedomn-m

11.8k31842

add a comment |

You can use find() instead of another nested .each() to shorten it a bit.

    $('.b2').on('click', function(){

    var str = "";



    $('div', '.b2').each(function(index){

        if(index > 0){

            str += '-';

        }

        str += $(this).find('img').attr('data-id');

    })



    console.log(str); //'53-66'



});

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

add a comment |

As usual with "get a single value from an array-like structure" questions, the answer is reduce. It's a good function to learn and understand, as it helps with so many questions.

In this case, I'm getting the elements with the class "imgbann" under the currently clicked div, converting the list to an array, then reducing the array to a string.

reduce takes a function to which the current value of an "accumulator" variable, the current item in the array. It also takes the index of the current item and the entire array, but for this task we don't need them. The second argument is the initial value of the accumulator if needed.

Then all we need to do is add a hyphen if the accumulator has a value, then the value of the current element's data-id attribute.

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

add a comment |

Not the cleanest answer,but it works. Although I have to point out, try adding some padding to your div to space out the elements for the click to work.

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

answered Nov 20 at 19:24

Pari Baker

223113

1

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

1

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

add a comment |

You could push those data-id's to an array and build your string from there. Try this:

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

answered Nov 20 at 19:27

justDan

1,0991718

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399805%2fgetting-a-string-from-data-attributes-of-grandchildren%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

If you would like to use JQuery you can use the JQuery methods find and map. Then simply use the Array method join.

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

answered Nov 20 at 19:30

zfrisch

4,39811024

that's it. thanks a lot
– puerto
Nov 20 at 19:32

add a comment |

If you would like to use JQuery you can use the JQuery methods find and map. Then simply use the Array method join.

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

answered Nov 20 at 19:30

zfrisch

4,39811024

that's it. thanks a lot
– puerto
Nov 20 at 19:32

add a comment |

If you would like to use JQuery you can use the JQuery methods find and map. Then simply use the Array method join.

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

answered Nov 20 at 19:30

zfrisch

4,39811024

If you would like to use JQuery you can use the JQuery methods find and map. Then simply use the Array method join.

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

$('.b2').on('click', function(){

 var str = $( ".b2" ).find( ".imgbann" );

 str = $.map(str, (e) => $(e).data("id")).join("-") ;

 console.log(str);

});

.b2{

background:gold;

cursor:pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

		<div class='singleb2'>

		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>

</div>



		<div class='singleb2'>

		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>

</div>

</div>

answered Nov 20 at 19:30

zfrisch

4,39811024

answered Nov 20 at 19:30

zfrisch

4,39811024

answered Nov 20 at 19:30

zfrisch

4,39811024

answered Nov 20 at 19:30

zfrisch

4,39811024

that's it. thanks a lot
– puerto
Nov 20 at 19:32

add a comment |

that's it. thanks a lot
– puerto
Nov 20 at 19:32

that's it. thanks a lot
– puerto
Nov 20 at 19:32

add a comment |

JQuery's .map() fits this scenario nicely: http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {

  return $(element).data("id");

}).toArray().join("-");

In the comments you stated they all had the same class, so can use .find(".class")

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:29

freedomn-m

11.8k31842

add a comment |

JQuery's .map() fits this scenario nicely: http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {

  return $(element).data("id");

}).toArray().join("-");

In the comments you stated they all had the same class, so can use .find(".class")

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:29

freedomn-m

11.8k31842

add a comment |

JQuery's .map() fits this scenario nicely: http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {

  return $(element).data("id");

}).toArray().join("-");

In the comments you stated they all had the same class, so can use .find(".class")

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:29

freedomn-m

11.8k31842

JQuery's .map() fits this scenario nicely: http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {

  return $(element).data("id");

}).toArray().join("-");

In the comments you stated they all had the same class, so can use .find(".class")

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

$('.b2').on('click', function() {

  var str = $(this).find(".imgbann").map(function(i, e) {

    return $(e).data("id");

  }).toArray().join("-");

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:29

freedomn-m

11.8k31842

answered Nov 20 at 19:29

freedomn-m

11.8k31842

answered Nov 20 at 19:29

freedomn-m

11.8k31842

answered Nov 20 at 19:29

freedomn-m

11.8k31842

add a comment |

You can use find() instead of another nested .each() to shorten it a bit.

    $('.b2').on('click', function(){

    var str = "";



    $('div', '.b2').each(function(index){

        if(index > 0){

            str += '-';

        }

        str += $(this).find('img').attr('data-id');

    })



    console.log(str); //'53-66'



});

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

add a comment |

You can use find() instead of another nested .each() to shorten it a bit.

    $('.b2').on('click', function(){

    var str = "";



    $('div', '.b2').each(function(index){

        if(index > 0){

            str += '-';

        }

        str += $(this).find('img').attr('data-id');

    })



    console.log(str); //'53-66'



});

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

add a comment |

You can use find() instead of another nested .each() to shorten it a bit.

    $('.b2').on('click', function(){

    var str = "";



    $('div', '.b2').each(function(index){

        if(index > 0){

            str += '-';

        }

        str += $(this).find('img').attr('data-id');

    })



    console.log(str); //'53-66'



});

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

You can use find() instead of another nested .each() to shorten it a bit.

    $('.b2').on('click', function(){

    var str = "";



    $('div', '.b2').each(function(index){

        if(index > 0){

            str += '-';

        }

        str += $(this).find('img').attr('data-id');

    })



    console.log(str); //'53-66'



});

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

edited Nov 20 at 19:21

answered Nov 20 at 19:14

Katie.Sun

58214

answered Nov 20 at 19:14

Katie.Sun

58214

answered Nov 20 at 19:14

Katie.Sun

58214

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

add a comment |

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

hmm... just without ending -
– puerto
Nov 20 at 19:17

@puerto surely you can figure that out. the first arg to each is an index
– Katie.Sun
Nov 20 at 19:18

add a comment |

As usual with "get a single value from an array-like structure" questions, the answer is reduce. It's a good function to learn and understand, as it helps with so many questions.

In this case, I'm getting the elements with the class "imgbann" under the currently clicked div, converting the list to an array, then reducing the array to a string.

Then all we need to do is add a hyphen if the accumulator has a value, then the value of the current element's data-id attribute.

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

add a comment |

As usual with "get a single value from an array-like structure" questions, the answer is reduce. It's a good function to learn and understand, as it helps with so many questions.

In this case, I'm getting the elements with the class "imgbann" under the currently clicked div, converting the list to an array, then reducing the array to a string.

Then all we need to do is add a hyphen if the accumulator has a value, then the value of the current element's data-id attribute.

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

add a comment |

As usual with "get a single value from an array-like structure" questions, the answer is reduce. It's a good function to learn and understand, as it helps with so many questions.

In this case, I'm getting the elements with the class "imgbann" under the currently clicked div, converting the list to an array, then reducing the array to a string.

Then all we need to do is add a hyphen if the accumulator has a value, then the value of the current element's data-id attribute.

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

As usual with "get a single value from an array-like structure" questions, the answer is reduce. It's a good function to learn and understand, as it helps with so many questions.

In this case, I'm getting the elements with the class "imgbann" under the currently clicked div, converting the list to an array, then reducing the array to a string.

Then all we need to do is add a hyphen if the accumulator has a value, then the value of the current element's data-id attribute.

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

$('.b2').on('click', function() {

  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');

  console.log(str);

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

</div>

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

answered Nov 20 at 19:36

Heretic Monkey

6,32063365

add a comment |

Not the cleanest answer,but it works. Although I have to point out, try adding some padding to your div to space out the elements for the click to work.

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

answered Nov 20 at 19:24

Pari Baker

223113

1

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

1

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

add a comment |

Not the cleanest answer,but it works. Although I have to point out, try adding some padding to your div to space out the elements for the click to work.

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

answered Nov 20 at 19:24

Pari Baker

223113

1

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

1

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

add a comment |

Not the cleanest answer,but it works. Although I have to point out, try adding some padding to your div to space out the elements for the click to work.

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

answered Nov 20 at 19:24

Pari Baker

223113

Not the cleanest answer,but it works. Although I have to point out, try adding some padding to your div to space out the elements for the click to work.

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

<head> 

      <style>

      .b2{

          background-color:red;

          padding: 10px;

      }

      </style>

  </head>

  <body>

    <div class="b2">

      <div class="singleb2">

        <img class="imgbann" src="00.jpg" data-id="53" alt="img" />

      </div>



      <div class="singleb2">

        <img class="imgbann" src="01.jpg" data-id="66" alt="img" />

      </div>

    </div>

    <script>

      let b2 = document.querySelector(".b2");

    b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        

        

    



    })

    </script>

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

      let b2 = document.querySelector(".b2");

        b2.addEventListener('click',(e)=>{

        let children = Array.from(e.target.children);

        let data = children.map(child=>{

            return child.children[0].dataset.id;

            

        })

        let d = data.join('-');

        console.log(d);

        })

answered Nov 20 at 19:24

Pari Baker

223113

answered Nov 20 at 19:24

Pari Baker

223113

answered Nov 20 at 19:24

Pari Baker

223113

answered Nov 20 at 19:24

Pari Baker

223113

1

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

1

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

add a comment |

1

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

1

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

Tagged [jquery] and OPs code in jquery. Why would you provide such an overly verbose vanilla answer?
– freedomn-m
Nov 20 at 19:25

I like doing things in plain old vanilla JS.
– Pari Baker
Nov 20 at 19:26

Also saw a tag in there for Javascript.
– Pari Baker
Nov 20 at 19:28

add a comment |

You could push those data-id's to an array and build your string from there. Try this:

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

answered Nov 20 at 19:27

justDan

1,0991718

add a comment |

You could push those data-id's to an array and build your string from there. Try this:

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

answered Nov 20 at 19:27

justDan

1,0991718

add a comment |

You could push those data-id's to an array and build your string from there. Try this:

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

answered Nov 20 at 19:27

justDan

1,0991718

You could push those data-id's to an array and build your string from there. Try this:

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

$('.b2').on('click', function() {

 var items = $(this).find('img'), 

     hold  = ,

     index = 0;

 

 items.each(function(i, e) {

   hold.push($(items[i]).data('id'));

 });



 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);

 

});

.b2 {

  background: gold;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>

  <div class='singleb2'>

    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>

  </div>



  <div class='singleb2'>

    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>

  </div>

  

  <p class='str'></p>

  

</div>

answered Nov 20 at 19:27

justDan

1,0991718

answered Nov 20 at 19:27

justDan

1,0991718

answered Nov 20 at 19:27

justDan

1,0991718

answered Nov 20 at 19:27

justDan

1,0991718

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg